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

下面是本人收集的19款超酷HTML5動畫和實用案例，以爲不錯，分享給你們。

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

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

在線演示        源碼下載

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

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

在線演示        源碼下載

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

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

在線演示        源碼下載

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

有幾天沒有分享HTML5動畫了，以前不少HTML5動畫都是利用CSS3的一些特性和Canvas特性來完成，好比這個HTML5/CSS3實現蝙蝠俠人物動畫就利用CSS3的動畫特性，HTML5 Canvas模擬衣服撕扯動畫就利用了HTML5 Canvas特性。今天咱們要分享一款利用HTML5/CSS3實現的吉普車動畫，小車能夠水平滾動，很是逼真。

在線演示        源碼下載

五、純CSS3 3D圖片翻轉展現 圖片3D陰影效果

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

在線演示        源碼下載

六、HTML5擺動的文字特效 相似柳枝擺動

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

在線演示        源碼下載

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

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

在線演示        源碼下載

八、漂亮的CSS3動畫進度條 可自定義進度條顏色

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

在線演示        源碼下載

九、CSS3垂直圖標菜單 帶Tooltip提示框

今天咱們要來分享一款CSS3菜單，菜單外觀很漂亮，是垂直排列的小圖標，鼠標滑過菜單項時，菜單項的背景會填充漸變的顏色，另外還會彈出該菜單項描述的Tooltip提示框。以前咱們也分享過不少CSS3垂直菜單，像這款CSS3二級下拉動畫菜單 菜單背景滑動動畫、純CSS3垂直動畫菜單等都是很是不錯的CSS3垂直菜單按鈕。

在線演示        源碼下載

十、純CSS3背景漸變按鈕 按鈕圖標淡入淡出動畫

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

在線演示        源碼下載

十一、HTML5 3D立方體旋轉動畫

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

在線演示        源碼下載

十二、動感的CSS3 Loading文字特效

這是一款很是帥的CSS3 Loading加載動畫，儘管看上去只有Loading這幾個字母，可是利用CSS3特性，能夠把這幾個字母渲染得很是動感。和以前推薦的CSS3 Loading動畫純CSS3加載Loading動畫圖不一樣，這款Loading動畫僅僅幾個字母就能夠展示使人震撼的效果。

在線演示        源碼下載

1三、CSS3多樣式小圖標按鈕 帶分享按鈕

今天咱們要來分享一款樣式很是豐富的CSS3按鈕特效，這些按鈕的外觀有點仿谷歌的風格，並且每個按鈕帶有個性的小圖標。另外按鈕有一個特色，還能夠定製出不錯的分享按鈕。以前咱們也分享過很多漂亮的CSS3按鈕，你們能夠在CSS3按鈕目錄下查看。

在線演示        源碼下載

1四、純CSS3實現滑桿開關切換按鈕動畫

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

在線演示        源碼下載

1五、HTML5/CSS3牙刷動畫 模擬真實刷牙效果

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

在線演示        源碼下載

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

上次咱們分享過一款網頁編輯器jQuery輕量級網頁編輯器 選中便可編輯，配置比較簡單。今天咱們要來分享一款基於tinymce的CSS3可視化網頁編輯器，編輯器功能至關完善，能夠對文本進行各類操做，也能夠添加連接和對齊文本。是一款功能更增強大網頁編輯器。

在線演示        源碼下載

1七、CSS3實現一款聯繫表單 輸入框帶小圖標

以前咱們已經分享過一款很是漂亮的CSS3聯繫表單CSS3聯繫表單 背景透明迷人，有興趣的朋友能夠去看一下。今天咱們再來分享一款外觀還不錯的CSS3聯繫表單，這款CSS3聯繫表單的輸入框帶有小圖標，而且在提交信息時能校驗輸入的信息。

在線演示        源碼下載

1八、HTML5/CSS3多顏色柱狀圖表 帶基準數據線

以前咱們分享過幾款很不錯的HTML5柱狀圖表，像HTML5柱狀圖表 可合併多張圖表的數據、HTML5/CSS3水平柱狀圖表。此次要分享的HTML5柱狀圖表也很是不錯，它有多種顏色來表示不一樣的數據。最大的特色是這款HTML5帶有基準數據線，能夠直觀地看到每一個數據項相對基準值的誤差。

在線演示        源碼下載

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

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

在線演示        源碼下載