精選19款華麗的HTML5動畫和實用案例

標籤：class   tar   ext   c   color   http   

下面是本人收集的19款超酷HTML5動畫和實用案例，覺得不錯，分享給大家。

1、HTML5 Canvas火焰噴射動畫效果

還記得以前分享過的一款HTML5煙花動畫HTML5 Canvas煙花特效，今天我們要來分享一款類似的HTML5動畫效果，一款基於HTML5 Canvas火焰噴射動畫。用滑鼠拖動一條直線，直線長度表示火焰噴射的力度，另外，火焰在運動中還可以反射效果哦。

線上示範        源碼下載

2、HTML5 3D立方體旋轉動畫

之前我們已經分享一款HTML5 3D正方體旋轉動畫，可以切換至正方體的任意一面。今天我們再來分享一款絢麗的HTML5 3D立方體旋轉動畫，這款立方體的色彩看上去非常豔麗，旋轉起來的動畫效果也十分流暢。是一款很不錯的HTML5 3D動畫效果。

線上示範        源碼下載

3、HTML5/CSS3實現大風車旋轉動畫

這次我們要來分享一款很酷的HTML5動畫，是一個可以旋轉的大風車動畫效果，回顧一下利用HTML5實現的旋轉動畫，我們可以看HTML5/CSS3實現3D旋轉陀螺動畫，它們的實現都是利用CSS3的transform:rotate屬性，這款大風車動畫的確比較厲害的。

線上示範        源碼下載

4、HTML5小車動畫 很酷的HTML5吉普車

有幾天沒有分享HTML5動畫了，之前很多HTML5動畫都是利用CSS3的一些特性和Canvas特性來完成，比如這個HTML5/CSS3實現蝙蝠俠人物動畫就利用CSS3的動畫特性，HTML5 Canvas類比衣服撕扯動畫就利用了HTML5 Canvas特性。今天我們要分享一款利用HTML5/CSS3實現的吉普車動畫，小車可以水平滾動，非常逼真。

線上示範        源碼下載

5、純CSS3 3D圖片翻轉展示 圖片3D陰影製作效果

之前我們分享過一些HTML5圖片3D效果，這篇文章分享10款效果驚豔的HTML5圖片特效中我們可以看到很多3D的圖片特效。今天我們再來分享一款利用純CSS3實現的3D圖片翻轉展示特效，點擊圖片或者下方的翻頁按鈕即可選中相應的圖片，並實現翻轉展示效果。

線上示範        源碼下載

6、HTML5擺動的文字特效 類似柳枝擺動

之前我們在html5tricks上分享過一些HTML5文字特效，像這款HTML5/CSS3 3D文字特效 文字外翻效果，像這款HTML5像素文字爆炸重組動畫特效都非常有特色。今天我們來分享一款可以擺動的HTML5文字特效，文字垂直下垂，並可以在微風中微微擺動，就像春風中的柳枝一樣。

線上示範        源碼下載

7、HTML5/CSS3 3D木塊旋轉動畫

今天我們要來分享一款迷人的HTML5/CSS3 3D旋轉動畫，這款3D動畫的主角是一根根小木條，每根小木條都會旋轉，小木條之間的旋轉有一定的間隔，這樣就會有一種螺旋的視覺效果。另外，和之前分享的HTML5 3D動畫一樣，也是利用了CSS3的transform屬性，點擊這裡可以查看更多HTML5 3D特效。

線上示範        源碼下載

8、漂亮的CSS3動畫進度條 可自訂進度條顏色

今天我們要再來分享一款很漂亮的CSS3動畫進度條，我們可以用它來顯示每一項資料的所佔的比例，效果很不錯。之前我們也有分享過很多功能強大的CSS3進度條，像純CSS3進度條 華麗5色進度條樣本、CSS3 SVG 進度條 Loading 動畫 炫酷發光特效都和今天分享的這款比較類似，可以看看。

線上示範        源碼下載

9、CSS3垂直表徵圖菜單 帶Tooltip提示框

今天我們要來分享一款CSS3菜單，菜單外觀很漂亮，是垂直排列的小表徵圖，滑鼠滑過功能表項目時，功能表項目的背景會填滿漸層的顏色，另外還會彈出該功能表項目描述的Tooltip提示框。之前我們也分享過很多CSS3垂直菜單，像這款CSS3二級下拉動畫菜單 菜單背景滑動動畫、純CSS3垂直動畫菜單等都是非常不錯的CSS3垂直功能表按鈕。

線上示範        源碼下載

10、純CSS3背景漸層按鈕 按鈕表徵圖淡入淡齣動畫

今天我們要再來分享一款純CSS3實現的按鈕動畫，這款按鈕動畫有以下特點：當滑鼠滑過按鈕時，按鈕上的小表徵圖便會以爆炸的方式淡出按鈕，取代它的時相應的文字，當滑鼠離開按鈕時，小表徵圖又會以爆炸的方式淡入按鈕中。更多CSS3按鈕，我們可以在CSS3按鈕欄目中尋找。

線上示範        源碼下載

11、HTML5 3D立方體旋轉動畫

之前我們已經分享一款HTML5 3D正方體旋轉動畫，可以切換至正方體的任意一面。今天我們再來分享一款絢麗的HTML5 3D立方體旋轉動畫，這款立方體的色彩看上去非常豔麗，旋轉起來的動畫效果也十分流暢。是一款很不錯的HTML5 3D動畫效果。

線上示範        源碼下載

12、動感的CSS3 Loading文字特效

這是一款非常帥的CSS3 Loading載入動畫，儘管看上去只有Loading這幾個字母，但是利用CSS3特性，可以把這幾個字母渲染得非常動感。和之前推薦的CSS3 Loading動畫純CSS3載入Loading動畫圖不同，這款Loading動畫僅僅幾個字母就可以展現令人震撼的效果。

線上示範        源碼下載

13、CSS3多樣式小表徵圖按鈕 帶分享按鈕

今天我們要來分享一款樣式非常豐富的CSS3按鈕特效，這些按鈕的外觀有點仿Google的風格，而且每一個按鈕帶有個性的小表徵圖。另外按鈕有一個特點，還可以定製出不錯的分享按鈕。之前我們也分享過不少漂亮的CSS3按鈕，大家可以在CSS3按鈕目錄下查看。

線上示範        源碼下載

14、純CSS3實現滑杆開關切換按鈕動畫

之前我們分享過一些CSS3開關切換按鈕了，像這款CSS3 3D發光切換按鈕、HTML5/CSS3開關按鈕 立體3D按鈕等。今天我們要再來分享一款純CSS3實現滑杆開關切換按鈕動畫，這個按鈕是一個搖杆，杆子推上推下來切換開關狀態，不同的開關狀態也有不同顏色的指示燈。

線上示範        源碼下載

15、HTML5/CSS3牙刷動畫 類比真實刷牙效果

今天我們再要來分享一款不錯的HTML5/CSS3動畫效果，你一個可愛的牙刷，牙刷外觀是利用純CSS3繪製出來的，也比較簡單。另外是刷牙動畫，看起來非常搞笑，像真的刷牙一樣，左刷刷，右刷刷，非常可愛的牙刷動畫。

線上示範        源碼下載

16、CSS3可視化網頁編輯器 基於tinymce編輯器

上次我們分享過一款網頁編輯器jQuery輕量級網頁編輯器 選中即可編輯，配置比較簡單。今天我們要來分享一款基於tinymce的CSS3可視化網頁編輯器，編輯器功能相當完善，可以對文本進行各種操作，也可以添加連結和對齊文本。是一款功能更加強大網頁編輯器。

線上示範        源碼下載

17、CSS3實現一款聯絡表單 輸入框帶小表徵圖

之前我們已經分享過一款非常漂亮的CSS3聯絡表單CSS3聯絡表單 背景透明迷人，有興趣的朋友可以去看一下。今天我們再來分享一款外觀還不錯的CSS3聯絡表單，這款CSS3聯絡表單的輸入框帶有小表徵圖，並且在提交資訊時能校正輸入的資訊。

線上示範        源碼下載

18、HTML5/CSS3多顏色柱狀圖表 帶基準資料線

之前我們分享過幾款很不錯的HTML5柱狀圖表，像HTML5柱狀圖表 可合并多張圖表的資料、HTML5/CSS3水平柱狀圖表。這次要分享的HTML5柱狀圖表也非常不錯，它有多種顏色來表示不同的資料。最大的特點是這款HTML5帶有基準資料線，可以直觀地看到每個資料項目相對基準值的偏差。

線上示範        源碼下載

19、HTML5/CSS3圖片描述效果 文字描述浮動在圖片上

今天要分享一款基於HTML5和CSS3的圖片特效，該圖片特效非常實用，可以讓你網頁上的圖片在滑鼠滑過時在圖片上方浮現一些標題文字，該標題文字在展現出來的時候有淡入淡出的動畫效果，同時標題文字的樣式也可以自訂多樣化，是一款非常不錯的HTML5圖片特效。

線上示範        源碼下載