整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5的強(qiáng)大之處不僅在于讓網(wǎng)頁元素更加靈活多變，更在于它可以很方便地實(shí)現(xiàn)各種網(wǎng)頁動(dòng)畫特效，讓你的網(wǎng)站更加富有現(xiàn)代化特色。就現(xiàn)在的瀏覽器而言，已經(jīng)基本都支持HTML5了，所以這也方便了我們開發(fā)者免去了考慮瀏覽器兼容性的頭疼問題。今天要分享一些令人難忘的HTML5炫酷動(dòng)畫，希望大家會(huì)喜歡。
分享之前我先推薦下我自己的web前端學(xué)習(xí)交流群：675498134，不管你是小白還是大神，我都?xì)g迎你們過來學(xué)習(xí)交流，不定期分享干貨，包括我自己整理的最新的前端資料和教程送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴，一起學(xué)習(xí)一起交流，共同進(jìn)步。
1、HTML5火球擋板碰撞動(dòng)畫游戲
今天我們要再來分享一款超酷的HTML5火球擋板碰撞動(dòng)畫游戲。屏幕上有一個(gè)火球在不停的運(yùn)動(dòng)，你可以移動(dòng)鼠標(biāo)滑動(dòng)屏幕下方的擋板，火球碰撞到擋板后，即可反彈出去，這是個(gè)很有特色的HTML5游戲。
2、HTML5/CSS3圓盤秒表動(dòng)畫 秒表可暫停計(jì)時(shí)
今天我們要分享一款基于HTML5和CSS3的圓盤秒表動(dòng)畫，秒表可以精確到0.001秒，并且可以在計(jì)時(shí)過程中暫停計(jì)時(shí)，同時(shí)秒表可以隨時(shí)重置。
3、3D版HTML5模擬衣服撕扯動(dòng)畫
還記得很早以前向大家分享的這款HTML5 Canvas模擬衣服撕扯動(dòng)畫嗎？這絕對是一款非常具有創(chuàng)意而且很好玩的HTML5動(dòng)畫。今天我們來分享一下它的3D版本，在原來的基礎(chǔ)上，衣服布料呈3D環(huán)形顯示，你同樣可以用鼠標(biāo)拖拽衣服，不過和之前不同的是，鼠標(biāo)左鍵用來拖拽衣服，鼠標(biāo)右鍵用來切割衣服，失去了之前鼠標(biāo)用力程度和衣服破碎程度的關(guān)系，似乎功能上有所缺失，但是HTML5 3D功能還是不錯(cuò)的。
4、純CSS3實(shí)現(xiàn)超酷的磁帶動(dòng)畫
記得之前分享過一款HTML5磁帶式古典播放器，效果相當(dāng)震撼。這次我們要用純CSS3來實(shí)現(xiàn)一個(gè)超酷的磁帶動(dòng)畫特效。首先用純CSS3繪制了一個(gè)磁帶的外觀，還是相當(dāng)逼真的，然后用CSS3的動(dòng)畫屬性實(shí)現(xiàn)了磁帶的旋轉(zhuǎn)，就像在播放歌曲一樣，如果配合HTML5的音頻播放功能，就和那個(gè)磁帶播放器差不多了。
5、HTML5仿Apple Watch時(shí)鐘動(dòng)畫
Apple Watch剛剛發(fā)布不久，就已經(jīng)有國外的大牛將其時(shí)鐘表盤界面用HTML5模仿出來了，并且這款HTML5仿Apple Watch的時(shí)鐘是動(dòng)態(tài)的，可以根據(jù)本地時(shí)間實(shí)時(shí)更新指針數(shù)據(jù)。時(shí)鐘的界面非常華麗，確實(shí)有蘋果的風(fēng)格，HTML5也的確非常強(qiáng)大。
6、純CSS3和SVG鼠標(biāo)滑過燈泡發(fā)光特效
這次要分享一款利用純CSS3和SVG實(shí)現(xiàn)的燈泡發(fā)光效果，我們只需要將鼠標(biāo)滑過燈泡，整個(gè)燈泡就會(huì)出現(xiàn)發(fā)光發(fā)亮的動(dòng)畫特效，效果相當(dāng)逼真。CSS3的運(yùn)用，讓燈泡外圍有一層淡淡的光暈。并且在燈光點(diǎn)亮和熄滅的時(shí)候有淡入淡出的效果。
7、HTML5動(dòng)感的火焰燃燒動(dòng)畫特效
這又是一款基于HTML5的超炫動(dòng)畫特效，是一款動(dòng)感的火焰燃燒動(dòng)畫效果。這款HTML5動(dòng)畫火焰燃燒非常逼真，之前我們也分享過一些其他的HTML5火焰燃燒動(dòng)畫，比如：HTML5 Canvas火焰燃燒動(dòng)畫和純CSS3實(shí)現(xiàn)打火機(jī)火焰動(dòng)畫。一般像這樣的HTML5動(dòng)畫都是基于Canvas的，今天的這款也不例外。
8、CSS3圖片傾斜效果 可傾斜四個(gè)角度
今天我們再來分享一款CSS3圖片特效，它可以讓網(wǎng)頁上的圖片傾斜任意的角度，其實(shí)在CSS3中實(shí)現(xiàn)圖片的傾斜非常簡單，我們并不需要利用復(fù)雜的JS計(jì)算各種角度，只要用CSS3的transition屬性即可完成圖片的傾斜效果，非常簡單，具體實(shí)現(xiàn)大家可以看DEMO演示。
分享到這里就告一段落了，學(xué)習(xí)web前端的朋友可以來我的群，群里每天都有對應(yīng)資料學(xué)習(xí)：675498134，歡迎初學(xué)和進(jìn)階中的小伙伴。
上個(gè)月，我們收集了不少來自國內(nèi)外的HTML5相關(guān)資源和jQuery插件，其中包括很多經(jīng)典帥酷的HTML5動(dòng)畫應(yīng)用，有些還利用了Canvas和SVG的相關(guān)特性，從而讓HTML5動(dòng)畫更加具有強(qiáng)烈的視覺效果。本文總結(jié)了上個(gè)月的最新HTML5動(dòng)畫應(yīng)用，希望大家會(huì)喜歡。
1、HTML5人物跑步動(dòng)畫
記得之前給大家分享過一款HTML5人物行走動(dòng)畫，效果非常震撼。今天要介紹的HTML5動(dòng)畫更加炫酷，是一款基于HTML5的人物跑步動(dòng)畫特效，在這款人物跑步動(dòng)畫中你可以點(diǎn)擊按鈕來切換人物手中拿的武器，效果非常逼真。
2、純CSS3實(shí)現(xiàn)眨眼動(dòng)畫 超逼真
我們在不久前分享過很多純CSS3實(shí)現(xiàn)的人物和動(dòng)物動(dòng)畫，每一款動(dòng)畫的效果都非常不錯(cuò)。今天我們要分享一個(gè)純CSS3實(shí)現(xiàn)的眨眼動(dòng)畫，其動(dòng)畫效果超級逼真，拿它來做動(dòng)畫人物的眼睛非常適合，這款CSS3眨眼動(dòng)畫完全用CSS3繪制，并沒有使用圖片。
3、HTML5 3D立方體圖片切換動(dòng)畫
今天我們要來分享一款HTML5圖片切換動(dòng)畫，該HTML5動(dòng)畫主要是將圖片分成幾個(gè)塊，切換時(shí)每一個(gè)塊都會(huì)以3D立方體的形式過度下一張圖片，立方體的打散和聚合動(dòng)畫都非常酷，你可以在JS文件中配置圖片的路徑和切換的數(shù)量，相當(dāng)靈活。
4、CSS3簡易清新的下拉菜單
對于CSS3菜單我們已經(jīng)在以前分享過很多了，有華麗的動(dòng)畫菜單，也有沖擊視覺的3D菜單，今天要介紹的是一款簡易而實(shí)用的下拉菜單，綠色的主題風(fēng)格，讓菜單的外觀看上去非常清新，下拉菜單的顏色和主菜單的顏色搭配也非常不錯(cuò)。
5、HTML5/jQuery迷人音樂播放器jPlayer
今天我們要來分享一款非常精巧的jQuery音樂播放器插件jPlayer，這款jQuery音樂播放器的外觀非常迷人，可以自定義漂亮的播放器背景圖片，而且播放器需要的功能它都齊全，更完美的是，這款jQuery音樂播放器還支持分享至社交網(wǎng)站。
6、HTML5自定義背景圖片的文字特效
在HTML5和CSS3標(biāo)準(zhǔn)出來之前，文字的背景只能是純色，更不用說是自定義背景圖片了。然而，強(qiáng)大的HTML5不僅讓文字背景支持漸變顏色，而且支持自定義的背景圖片，這些圖片就像遮罩層，讓文字的背景變得豐富多彩。
周在給學(xué)生講授JavaScript課程中setInterval方法時(shí)，想到了我們在網(wǎng)上看到的各類GIF動(dòng)圖比較有意思，就將其引入到教學(xué)中，教學(xué)內(nèi)容設(shè)計(jì)如果通過HTML5與JavaScript實(shí)現(xiàn)網(wǎng)頁類似GIF效果的動(dòng)態(tài)圖。于是在網(wǎng)上搜集了部分gif格式動(dòng)圖，將每一個(gè)Gif動(dòng)圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進(jìn)行動(dòng)畫的實(shí)現(xiàn)。通過學(xué)習(xí)可以讓學(xué)生進(jìn)一步了解canvas動(dòng)畫實(shí)現(xiàn)的過程與原理。并將其發(fā)布到頭條，也希望對有興趣的初學(xué)者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實(shí)現(xiàn)動(dòng)畫的素材我們已經(jīng)給出，主要通過gif動(dòng)圖導(dǎo)出一組圖片，下面對html5動(dòng)畫實(shí)現(xiàn)過程進(jìn)行簡單說明。
實(shí)現(xiàn)其動(dòng)畫的基本思路是通過HTML5提供的canvas元素進(jìn)行圖片的繪制與展示，借助setInterval方法實(shí)現(xiàn)間隔指定時(shí)間調(diào)用新的圖片實(shí)現(xiàn)重新繪圖。其中繪圖主要使用drawImage方法進(jìn)行繪圖，最終通過圖片依次重繪實(shí)現(xiàn)動(dòng)畫效果。具體實(shí)現(xiàn)過程如下：
在頁面body部分添加Canva標(biāo)簽，設(shè)置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進(jìn)行繪圖，需要提供要繪制的圖片資源即繪圖的坐標(biāo)位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調(diào)用多個(gè)img實(shí)現(xiàn)定時(shí)不同圖片的繪制，因此我們可以使用數(shù)組存儲(chǔ)所加載的圖片資源。本例圖片數(shù)量為14，因此我們數(shù)組長度為14。使用素組存儲(chǔ)圖片實(shí)現(xiàn)代碼如下：
加載圖片資源代碼
本例設(shè)計(jì)在頁面加載時(shí)自動(dòng)播放動(dòng)畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關(guān)代碼，主要代碼包括獲取畫布canva與實(shí)例化繪圖對象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實(shí)現(xiàn)動(dòng)畫主要需要定義回調(diào)函數(shù)與回調(diào)函數(shù)觸發(fā)執(zhí)行的周期，本例中我們使用匿名函數(shù)作為回調(diào)函數(shù)，觸發(fā)周期設(shè)置為100毫秒。setInterval函數(shù)定義如下：
setInterval函數(shù)
在定義完函數(shù)之后可在其匿名函數(shù)函數(shù)體部分寫入繪圖方法dramImage(),實(shí)現(xiàn)周期調(diào)用不同圖片資源進(jìn)行繪圖，最終展示出動(dòng)畫效果。為了保證循環(huán)調(diào)用14張圖片，我們需要設(shè)置一計(jì)數(shù)全局變量i，由于我們圖片采用數(shù)組存儲(chǔ)，下標(biāo)為數(shù)組，且從0-13進(jìn)行編號，因此當(dāng)計(jì)數(shù)值小于13時(shí)自動(dòng)+1，指向下一數(shù)組下標(biāo)，當(dāng)為13時(shí)，設(shè)置計(jì)數(shù)值為0，回到數(shù)組第一元素，最終實(shí)現(xiàn)數(shù)組訪問下標(biāo)的循環(huán)。setInterval實(shí)現(xiàn)完整代碼如下：
setInterval完整代碼
HTML動(dòng)畫效果展示
本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯(cuò)誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請關(guān)注并私信，往期前端設(shè)計(jì)文章鏈接如下：
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
