絕對震撼 7款HTML5動畫應用及源碼

        關于 HTML5 動畫，我們已經分享太多了，當然也有很多利用純 CSS3 實現的動畫效果。今天我們精選了 7 款基于 HTML5、Canvas 以及 CSS3 的動畫特效，同時也提供源代碼，一起來看看吧。

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

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

        在線演示        源碼下載

        2、CSS3 3D 分頁導航按鈕

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

        在線演示        源碼下載

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

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

        在線演示        源碼下載

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

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

        在線演示        源碼下載

        5、jQuery/CSS3 帶當前時間的日歷插件

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

        在線演示        源碼下載

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

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

        在線演示        源碼下載

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

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

        在線演示        源碼下載

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