超級驚豔 10款HTML5動畫特效推薦[轉]

ylbtech_html5_demo

今天咱們要來推薦 10 款超級驚豔的 HTML5 動畫特效，有一些是基於 CSS3 和 jQuery 的，比較實用，特別是前幾個 HTML5 動畫，簡直酷斃了，如今將它們分享給你們，也許你能用到這些 HTML5 動畫和 jQuery 應用。

　　一、HTML5 Canvas 發光 Loading 動畫

　　以前咱們分享過不少基於 CSS3 的 Loading 動畫效果，相信你們都很喜歡。今天咱們要來分享一款基於 HTML5 Canvas 的發光 Loading 加載動畫特效。Loading 旋轉圖標是在 canvas 畫布上繪製的，整個 loading 動畫是發光 3D 的視覺效果，HTML5 很是強大。

　　在線演示        源碼下載

　　二、jQuery 球狀放大鏡特效插件

　　今天咱們要來分享一款基於 jQuery 的放大鏡特效插件，和其餘放大鏡不一樣的是，這款 jQuery 放大鏡插件是球狀的，看上去有 3D 的視覺效果。當你把鼠標滑過頁面上的文字時，即會出現很酷的球狀放大鏡，來放大當前區域的文字。而且以球心爲中心點向外文字逐漸變小，這就產生了立體感。

　　在線演示        源碼下載

　　三、HTML5 Canvas 粒子模擬效果

　　這是一款利用 HTML5 Canvas 模擬出來的 30000 個粒子動畫，當你用鼠標在 canvas 畫布上移動時，鼠標周圍的一些粒子就會跟着你移動，並造成必定的圖案，就像你在玩沙畫同樣，效果很是不錯。這裏，咱們應用了一些 HTML5 的特性，讓這個粒子動畫顯得至關動感。

　　在線演示        源碼下載

　　四、HTML5/CSS3 帶區域地圖的聯繫表單

　　今天咱們要來分享一款功能強大的 HTML5/CSS3 聯繫表單，它能夠選中不一樣區域顯示相應的地圖，而後針對該區域填寫聯繫表單。

　　在線演示        源碼下載

　　五、CSS3 3D 立方體 Loading 加載動畫特效

　　以前咱們分享過一些 HTML5 和 CSS3 的 3D 立方體特效，他們都是能夠旋轉來展現 3D 立體的效果。此次分享的這款 CSS3 3D 立方體確是用來作 Loading 加載動畫的，9 個小立方體上下浮動，呈現波浪的效果，而且，這個 Loading 動畫還利用了 CSS3 的陰影屬性讓這些立方體更充滿 3D 色彩。

　　在線演示        源碼下載

　　六、超具立體感的 CSS3 3D 菜單菜單項帶小圖標

　　今天咱們要再分享一款 CSS3 3D 立體菜單，這款菜單側躺在頁面上，每一個菜單項都有不錯的小圖標。

　　在線演示        源碼下載

　　七、基於 Bootstrap 和 CSS3 的響應式 UI 框架

　　今天咱們要來分享一組基於 Bootstrap 和 CSS3 的響應式 UI 框架，這個 UI 框架中，包含了自定義 CSS3 按鈕、自定義 CSS3 複選框和單選框、自定義 CSS3 下拉框等等，外觀很是漂亮。

　　在線演示        源碼下載

　　八、純 CSS3 立體動畫菜單菜單項按下有內陰影

　　此次小編來分享一款利用純 CSS3 實現的立體動畫菜單，該菜單的實現很是簡單，並無太多的特效渲染，可是看起來卻很是乾淨漂亮，尤爲配合灰黑色的背景，讓菜單顯得有點立體的感受。另外，當咱們點擊菜單項時，菜單項將會出現內陰影的視覺效果。

　　在線演示        源碼下載

　　九、HTML5 Canvas 動畫按鈕點擊水波擴散效果

　　以前咱們分享的都是基於 CSS3 的自定義按鈕，今天咱們來分享一款基於 HTML5 Canvas 的動畫按鈕，每個按鈕都是一個 canvas 畫布，這就很靈活，你能夠在 canvas 繪製任意你喜歡的東西做爲按鈕的背景畫面，而且，還能夠有動畫特效。

　　在線演示        源碼下載

　　十、CSS3/jQuery 實現 Tab 菜單小工具

ylbtech_html5_demo　

   幾天要分享一款基於 CSS3 和 jQuery 的 Tab 菜單，這款 Tab 菜單的外觀很是簡潔清新，tab 選項卡的上邊框有加粗的線條，讓這些 tab 菜單按鈕顯得頗有立體感。另外有一點不足的是，tab 切換時沒有加入 CSS3 動畫效果。這款 tab 菜單能夠放到你網頁的側邊欄做爲小工具。

　　在線演示        源碼下載

　　以上就是 10 款超級驚豔的 HTML5 動畫特效，歡迎收藏分享。

原文連接：http://www.html5tricks.com/10-wonderful-html5-animation.htmlH