今天又要來推薦一款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動畫應用及原始碼，歡迎收藏分享。
本文轉載自：http://www.html5tricks.com/7-wonderful-html5-apps.html
相關閱讀
評論(2)