10款很酷的HTML5動畫和實用應用 有源碼

10款很酷的HTML5動畫和實用應用，這裏有菜單、SVG動畫、Loading動畫，總有你喜歡的，並且，每一款HTML5應用都提供源代碼下載，方便你們學習和研究，一塊兒來看看吧。

一、HTML5 SVG 樹枝分叉動畫特效

今天咱們來分享一款基於HTML5和SVG的動畫效果，它是一個能夠自動分叉的樹，動畫將以二叉樹的形式展開。這三顆SVG樹先是用svg的g畫筆來定義這些樹枝，而後利用javascript來實現動態改變g從而實現樹枝的分叉展開動畫。

在線演示

源碼下載

二、HTML5/CSS3 3D下拉摺疊菜單 超炫CSS3菜單動畫

以前咱們介紹過不少CSS3菜單了，效果都十分華麗炫酷，可是這些CSS3菜單基本都是二維平面菜單，今天要分享的這款HTML5/CSS3菜單倒是3D的效果。菜單展示時出現摺疊下拉的動畫特效，菜單也能夠收起，鼠標滑過菜單項的效果也很不錯。

在線演示

源碼下載

三、HTML5/CSS3扇形進度條動畫 可漸變顏色

今天咱們要來分享一款很特別的CSS3進度條動畫，它是一個半個圓的扇形，同時，隨着進度的增長，進度條的背景顏色會逐漸變化，最後完成的時候變成綠色，效果很是不錯。另外，咱們再推薦以前分享過的一款進度條：漂亮的CSS3動畫進度條 可自定義進度條顏色。

在線演示

源碼下載

四、HTML5 Canvas煙花特效 場景十分華麗

對於HTML5技術來講，Canvas應用很是普遍，基本上全部HTML5動畫特效都會用到Canvas特性。今天咱們要分享一款基於HTML5 Canvas實現的煙花特效，咱們只需在黑色的畫布上點擊鼠標，即會有漂亮的煙花綻開在夜空當中。

在線演示

源碼下載

五、CSS3 Loading加載動畫 小球循環轉圈

今天咱們要來看一款很是動感的CSS3 Loading加載動畫特效，它和其餘的Loading動畫不同，它並無十分規則的圓圈動畫，而是不規則的轉圈，有5個小球互相撞擊轉圈來實現這款Loading動畫特效。另外咱們還能夠看一款HTML5 Canvas實現超酷Loading動畫，也很是不錯。

在線演示

源碼下載

六、jQuery模擬鍵盤事件 可對應鍵盤每個鍵

這是一款基於jQuery的模擬鍵盤事件的應用，鍵盤上除了功能鍵，其餘鍵均可以用這款插件來模擬。當你敲擊鍵盤上的鍵時，這款應用會幫助你獲取到這個鍵的事件，並在頁面上的模擬鍵盤中以動畫的形式展示出來，至關實用。

在線演示

源碼下載

七、HTML5 3D彈簧線圈動畫特效

這是一款基於HTML5的3D動畫特效，它是一個線圈彈簧，而且能夠像波浪同樣運動，就像真實的彈簧同樣，每一圈的彈簧都會跟隨上一圈的運動而運動，很是逼真。以前咱們也分享過一款CSS3彈簧線圈動畫，效果也很不錯。

在線演示

源碼下載

八、CSS3 3D 蘋果筆記本動畫

這又是一款超酷的CSS3 3D動畫效果，它是一款帶有3D視覺效果，而且能夠360度旋轉的macbook air。這款CSS3 3D動畫的筆記本底部有一個逼真的投影，能夠跟隨圖片一塊兒轉動，從而凸顯其3D效果，是一款很不錯的CSS3 3D動畫特效。

在線演示

源碼下載

九、CSS3 3D立方體動畫 表面顏色可漸變

這是一款很酷的CSS3 3D立方體動畫，和以前分享的立方體動畫不一樣的是，這款CSS3立方體動畫的幾個表面的背景顏色都有漸變的動畫效果，伴隨着立方體的旋轉，這款CSS3 3D動畫顯得更加炫酷迷人，效果很是不錯。

在線演示

源碼下載

十、jQuery/CSS3相冊瀏覽插件 相冊圖片濾鏡效果

這是一款基於jQuery和CSS3的超酷相冊瀏覽插件，當咱們滑過相冊圖片的縮略圖時，圖片即會產生濾鏡效果，由灰色編程彩色，同時圖片周圍產生不錯的陰影效果。點擊縮略圖時，咱們將開始瀏覽相冊的原始圖片，咱們點擊右上角的關閉按鈕便可回到相冊縮略圖模式。

在線演示

源碼下載

本文固定連接: http://www.i7758.com/archives/1611.html