Web開發的未來必定是讓網頁更加的多樣化，更加絢麗多彩，用戶交互更加方便。HTML5的應用正好可以達到這一要求，本文主要分享了9個基於HTML5和CSS3的動畫應用，效果相當驚豔，一起來看看吧。
1、HTML5 Canvas實現會跳舞的時間動畫
這是一款很有意思的HTML5 Canvas時間動畫，總體來說，它是一個可以和客戶端同步的時鐘，其特點是當時間走動時，數字將會散落成一個個粒子動畫，這種HTML5 Canvas動畫在之前也有分享過，比如這個HTML5粒子文字特效。
2、HTML5 SVG繪製的紙鶴動畫 帶顏色漸變效果
前面我們分享過一款基於HTML5和SVG的創意開關切換按鈕，比較實用。這次要帶來的這款HTML5應用也是基於SVG的，是一隻雄偉的紙鶴，並且紙鶴的皮膚顏色會不斷地發生變化，動畫效果非常不錯，小編認爲，如果紙鶴能動起來那就更加完美了，期待您去完善它。
3、HTML5 Canvas炫酷的火焰風暴動畫
利用HTML5技術，我們已經實現過不少關於火焰動畫特效的HTML5應用，尤其是和Canvas搭配，比如HTML5動感的火焰燃燒動畫特效和HTML5 Canvas火焰噴射動畫效果。這次給大家帶來的是一款基於HTML5 Canvas的火焰風暴動畫特效，改動畫效果就像從天上掉落火焰一樣，火焰風暴逐漸蔓延到整一個畫布。
4、HTML5五彩連珠小遊戲
之前我們分享過很多炫酷的HTML5遊戲，比如HTML5堆木頭遊戲，實現原理也是比較簡單的。今天我們要分享另外一款HTML5小遊戲，名字叫五彩連珠。點擊綵球移動到期望的位置，每移動一次，畫面將隨機出現3個新的綵球；當同一顏色的綵球連成5個一行或一列或一斜線時，這5個綵球同時消失，遊戲得分10分。當畫面上每個方格都被綵球佔滿時，遊戲結束。
5、CSS3音量調節旋轉按鈕
之前我們分享過很多可以調節音量的HTML5視頻播放器，大部分音量調節按鈕都比較普通，沒有什麼特色。今天要分享一款基於CSS3的音量調節旋轉按鈕，只要按住鼠標即可旋轉按鈕來調節音量。這是一款很有特色旋轉按鈕。
6、純CSS3實現超酷的磁帶動畫
記得之前分享過一款HTML5磁帶式古典播放器，效果相當震撼。這次我們要用純CSS3來實現一個超酷的磁帶動畫特效。首先用純CSS3繪製了一個磁帶的外觀，還是相當逼真的，然後用CSS3的動畫屬性實現了磁帶的旋轉，就像在播放歌曲一樣，如果配合HTML5的音頻播放功能，就和那個磁帶播放器差不多了。
7、HTML5仿Apple Watch時鐘動畫
Apple Watch剛剛發佈不久，就已經有國外的大牛將其時鐘表盤界面用HTML5模仿出來了，並且這款HTML5仿Apple Watch的時鐘是動態的，可以根據本地時間實時更新指針數據。時鐘的界面非常華麗，確實有蘋果的風格，HTML5也的確非常強大。
8、CSS3 3D鏤空文字特效
之前我們有分享過一款鏤空效果的CSS3按鈕，鏤空部分可以定義其他的背景圖片。今天我們要介紹的也是一款基於CSS3的鏤空文字特效，這樣的鏤空文字效果在以前很難實現，必須使用背景圖片，但是現在利用CSS3，這種鏤空效果變得非常簡單。
9、jQuery/CSS3實現網頁元素抖動特效
今天我們要來分享一款很酷的jQuery/CSS3動畫特效，它可以讓網頁中的元素進行抖動，抖動的參數也可以自定義設置。可以定義抖動的快慢、方向以及更爲複雜的抖動效果。改應用基於jQuery和CSS3實現，實現起來也比較方便。
以上就是9款驚豔的HTML5/CSS3動畫應用賞析，歡迎收藏分享。 轉載請註明來源：http://www.html5tricks.com/9-amazing-html5-css-animation.html
