9個最新最酷的HTML5動畫

---

1.HTML5可愛的404搞笑動畫機器人

很久以前，我在網上看到一個帖子，目的是交流404頁的想法，很遺憾我沒有找到它。但今天我找到一個用404機器人進行演示的HTML5動畫，當你進入到404頁時就會出現，那會有一個很可愛的機器人在跳舞。這個機器人的跳舞動作使用了HTML5和CSS3動畫特性，實現了我們看到的演示。

 
傳送門：我是可愛的機器人

2.HTML5/CSS3晃動滑鼠移到的圖案很可愛

這是一個對圖示使用CSS3抖動效果的簡單的實現，首先我們有幾種流行和漂亮的圖示，圖示的底部寫著描述性的文字。當我們把滑鼠移動至離開該圖示時，這個圖示就會停止晃動，彷彿在告訴使用者快點我，這個功能應該被用在很多地方。

傳送門：快來搖晃我吧

3.HTML5/jQuery的3D焦點圖外掛的各種酷動畫

這是一個基於3D的HTML5和jQuery的焦點圖外掛，它具有多種很酷的HTML5焦點圖切換動畫包括3D百葉窗，3D翻頁和其他特效，一些過渡效果甚至影響到高版本的Chrome瀏覽器。（親測搜狗、IE瀏覽器對此動畫不太友好）

 
傳送門：酷斃了的翻頁特效

4.CSS3主要網站有一個小網站標誌圖示的分享按鈕

今天我搜集了一個非常強大的CSS3的主要網站分享按鈕，基本上一些國外的社交網站上都有這些按鈕。另外，這個CSS3分享標誌小圖示按鈕上面也寫著社交網路站點，看起來很美。

傳送門：主要站點分享按鈕

5.CSS3很酷的滑動選單動畫

之前我們分享了很多非常酷並且很實用的CSS3選單，今天我們來分享一個CSS3滑動選單，這個選單當滑鼠滑過選單項時在幾個非常漂亮的小圖示上進行初始化，一個小圖示擴充套件到特定選單的內容，這可以被他們自定義，效果超讚。

傳送門：滑動選單

6.HTML畫筆很酷的動畫效果

在這個動畫裡，我們可以選擇不同的筆刷形狀，當筆刷在畫布上時我們會看到非常絢麗的動畫。

傳送門：酷酷的筆刷
 
7.HTML5/CSS3實現蜘蛛俠蝙蝠俠

使用CSS3實現的動畫角色非常多，也有使用HTML5技巧的，今天我們分享一個使用純CSS3實現的蝙蝠俠動畫，當頁面開始載入後開始畫，就像組裝汽車一樣。

傳送門：我是蝙蝠俠

8.HTML5 SVG圓形圖表資料動畫

之前我們也分享過一些HTML5應用餅圖，可以清楚地顯示每個資料的比例。今天分享的這個HTML5圖表是一個環，是一個類似於主要特徵的也可以清楚地理解每個資料比例的餅圖。這個使用SVG圖表資料初始化實現的HTML5迴圈圖會出現很酷的動畫效果。

傳送門：很酷的圓環比例圖動畫

9.HTML5迷你音樂播放器，3D翻轉播放按鈕

在我們分享的一個看起來很酷的HTML5的音樂播放器上，相對來說較小的迷你播放器，儘管播放器還沒有皮膚，看起來也不錯，但它的功能非常完整。這個HTML5音樂播放器的特徵是一個3D翻轉播放按鈕。當然，對於這個HTML5播放器的皮膚，每個人都能設計出他們自己獨有的。

 
傳送門：3D擬物翻轉按鈕

以上這些就是9個驚人HTML5動畫最新的原始碼，你喜歡它們麼？