文章來源：http://www.lanlanwork.com/blog/?post=2684

每一個扁平化介面設計，都是我們的心靈碰撞致力於最棒的 metro ui 設計

如果您想訂閱本部落格內容，每天自動發到您的郵箱中，請點這裡

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

1、HTML5 Canvas 發光 Loading 動畫

之前我們分享過很多基於 CSS3 的 Loading 動畫效果，相信大家都很喜歡。今天我們要來分享一款基於 HTML5 Canvas 的發光 Loading 載入動畫特效。Loading 旋轉圖示是在 canvas 畫布上繪製的，整個 loading 動畫是發光 3D 的視覺效果，HTML5 非常強大。

線上演示        原始碼下載

2、jQuery 球狀放大鏡特效外掛

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

線上演示        原始碼下載

3、HTML5 Canvas 粒子模擬效果

這是一款利用 HTML5 Canvas 模擬出來的 30000 個粒子動畫，當你用滑鼠在 canvas 畫布上移動時，滑鼠周圍的一些粒子就會跟著你移動，並形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯。這裡，我們應用了一些 HTML5 的特性，讓這個粒子動畫顯得相當動感。

線上演示        原始碼下載

4、HTML5/CSS3 帶區域地圖的聯絡表單

今天我們要來分享一款功能強大的 HTML5/CSS3 聯絡表單，它可以選中不同區域顯示相應的地圖，然後針對該區域填寫聯絡表單。

線上演示        原始碼下載

5、CSS3 3D 立方體 Loading 載入動畫特效

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

線上演示        原始碼下載

6、超具立體感的 CSS3 3D 選單選單項帶小圖示

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

線上演示        原始碼下載

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

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

線上演示        原始碼下載

8、純 CSS3 立體動畫選單選單項按下有內陰影

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

線上演示        原始碼下載

9、HTML5 Canvas 動畫按鈕點選水波擴散效果

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

線上演示        原始碼下載

10、CSS3/jQuery 實現 Tab 選單小工具

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

線上演示        原始碼下載

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