除非特別聲明，PHP100新聞均為原創(chuàng)或投稿報道，轉(zhuǎn)載請注明作者及原文鏈接

原文地址：?http://www.php100.com/html/it/mobile/2014/0702/7030.html

[導(dǎo)讀]?關(guān)于HTML5動畫，我們已經(jīng)分享太多了，當(dāng)然也有很多利用純CSS3實現(xiàn)的動畫效果。今天我們精選了7款基于HTML5、Canvas以及CSS3的動畫特效，同時也提供源代碼，一起來看看吧。

1、HTML5 Canvas模擬衣服撕扯動畫 超級逼真

今天又要來推薦一款HTML5?Canvas動畫，是一個模擬衣服撕扯動畫，效果非常逼真。剛開始衣服掛在繩子上，用鼠標(biāo)拖拽衣服即可讓衣服擺動起來，當(dāng)你拖拽的很用力時，你會發(fā)現(xiàn)，衣服被撕破了。該HTML5動畫會捕獲到鼠標(biāo)拖拽的用力程度，從而來判斷并實現(xiàn)衣服應(yīng)該破損的程度，越用力，衣服被撕破的速度越快，趕緊來體驗一下這個HTML5動畫吧。

在線演示? ? ? ??源碼下載

2、CSS3 3D 分頁導(dǎo)航按鈕

這是一款用 CSS3 實現(xiàn)的 3D 分頁導(dǎo)航按鈕，和之前分享的一些jQuery分頁插件一樣，這款CSS3 3D分頁插件同樣具有前和分頁頁碼和數(shù)字頁面，不同的是，這款分頁插件的分頁頁碼是一個個3D的導(dǎo)航按鈕，樣式十分新穎，不過需要CSS3支持。

在線演示? ? ? ??源碼下載

3、HTML5 3D?卡片視頻播放器 超立體視覺

這是一款基于HTML5的視頻播放器，不過你一眼看上去，它并不像一款播放器，而是一張張3D立體的卡片，沒有播放按鈕，沒有音量設(shè)置。不過它的特色就是把HTML5視頻播放器嵌入到卡片里面，然后這些卡片可以和用戶互動，并產(chǎn)生HTML5 3D的效果，非常不錯的創(chuàng)意。點擊卡片即可播放視頻。

在線演示? ? ? ??源碼下載

4、HTML5粘瀏覽器的小泥塊 超級可愛動畫

這款HTML5動畫非常可愛，動畫的主角是一款粘人的小泥塊，用鼠標(biāo)拖動泥塊，泥塊即可粘住瀏覽器，讓后一點點掉落下來。而完成這樣的HTML5動畫，我們只需一張圖片和一系列CSS3代碼即可。雖然這款動畫實用性并不強，但是其中的HTML5原理值得大家學(xué)習(xí)。

在線演示? ? ? ??源碼下載

5、jQuery/CSS3帶當(dāng)前時間的日歷插件

網(wǎng)頁上日歷插件應(yīng)用非常廣泛，尤其是在個人空間和博客上，就需要更多個性化的日歷插件了。這款jQuery/CSS3日歷插件應(yīng)該說還是蠻具有個性化的，尤其是它帶有當(dāng)前時間的特點，這樣除了星期、日期，你還可以看本地時間，功能十分強大的jQuery日歷插件。

在線演示? ? ? ??源碼下載

6、CSS3垂直進度條動畫 數(shù)字百分比顯示

這次我們要來分享一款CSS3進度條動畫，這款進度條是垂直放置的，在進度加載的時候，進度條的背景會出現(xiàn)一個快速移動的箭頭動畫，并且隨著進度條的移動，數(shù)字百分比也將隨著進度實時更新，直至進度完成，完成后進度條顏色由紅色編程綠色。

在線演示? ? ? ??源碼下載

7、HTML5 Canvas 3D 倒計時爆炸特效

今天要分享的這款?HTML5?3D 動畫特效非常給力，它是一個基于Canvas 的倒計時爆炸效果，隨著時間的走動，時間數(shù)字傍邊就會有爆炸的特效，一群像素點就會在數(shù)字中心爆發(fā)出來，感覺非常酷。而且應(yīng)用了 HTML5 的 3D 特性，讓整一個時鐘顯得非常有立體感。

在線演示? ? ? ??源碼下載

以上就是7款效果震撼的HTML5動畫應(yīng)用及源碼，歡迎收藏分享。

本文鏈接：http://www.html5tricks.com/7-wonderful-html5-apps.html
本文作者：html5tricks?– 超人

轉(zhuǎn)載于:https://www.cnblogs.com/zsw-1993/p/4879324.html

總結(jié)

以上是生活随笔為你收集整理的绝对震撼 7款HTML5动画应用及源码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。