9款驚豔的HTML5/CSS3動畫應用賞析

1、HTML5五彩連珠小遊戲

之前我們分享過很多炫酷的HTML5遊戲，比如HTML5堆木頭遊戲，實現原理也是比較簡單的。今天我們要分享另外一款HTML5小遊戲，名字叫五彩連珠。點選綵球移動到期望的位置，每移動一次，畫面將隨機出現3個新的綵球；當同一顏色的綵球連成5個一行或一列或一斜線時，這5個綵球同時消失，遊戲得分10分。當畫面上每個方格都被綵球佔滿時，遊戲結束。

線上演示原始碼下載

2、HTML5 SVG繪製的紙鶴動畫 帶顏色漸變效果

前面我們分享過一款基於HTML5和SVG的創意開關切換按鈕，比較實用。這次要帶來的這款HTML5應用也是基於SVG的，是一隻雄偉的紙鶴，並且紙鶴的皮膚顏色會不斷地發生變化，動畫效果非常不錯，小編認為，如果紙鶴能動起來那就更加完美了，期待您去完善它。

線上演示原始碼下載

3、HTML5 Canvas炫酷的火焰風暴動畫

利用HTML5技術，我們已經實現過不少關於火焰動畫特效的HTML5應用，尤其是和Canvas搭配，比如HTML5動感的火焰燃燒動畫特效和HTML5 Canvas火焰噴射動畫效果。這次給大家帶來的是一款基於HTML5Canvas的火焰風暴動畫特效，改動畫效果就像從天上掉落火焰一樣，火焰風暴逐漸蔓延到整一個畫布。

線上演示原始碼下載

4、HTML5 Canvas實現會跳舞的時間動畫

這是一款很有意思的HTML5 Canvas時間動畫，總體來說，它是一個可以和客戶端同步的時鐘，其特點是當時間走動時，數字將會散落成一個個粒子動畫，這種HTML5Canvas動畫在之前也有分享過，比如這個HTML5粒子文字特效。

線上演示原始碼下載

5、CSS3音量調節旋轉按鈕

之前我們分享過很多可以調節音量的HTML5視訊播放器，大部分音量調節按鈕都比較普通，沒有什麼特色。今天要分享一款基於CSS3的音量調節旋轉按鈕，只要按住滑鼠即可旋轉按鈕來調節音量。這是一款很有特色旋轉按鈕。

線上演示原始碼下載

6、純CSS3實現超酷的磁帶動畫

記得之前分享過一款HTML5磁帶式古典播放器，效果相當震撼。這次我們要用純CSS3來實現一個超酷的磁帶動畫特效。首先用純CSS3繪製了一個磁帶的外觀，還是相當逼真的，然後用CSS3的動畫屬性實現了磁帶的旋轉，就像在播放歌曲一樣，如果配合HTML5的音訊播放功能，就和那個磁帶播放器差不多了。

線上演示原始碼下載

7、HTML5仿Apple Watch時鐘動畫

Apple Watch剛剛釋出不久，就已經有國外的大牛將其時鐘錶盤介面用HTML5模仿出來了，並且這款HTML5仿AppleWatch的時鐘是動態的，可以根據本地時間實時更新指標資料。時鐘的介面非常華麗，確實有蘋果的風格，HTML5也的確非常強大。

線上演示原始碼下載

8、CSS3 3D鏤空文字特效

之前我們有分享過一款鏤空效果的CSS3按鈕，鏤空部分可以定義其他的背景圖片。今天我們要介紹的也是一款基於CSS3的鏤空文字特效，這樣的鏤空文字效果在以前很難實現，必須使用背景圖片，但是現在利用CSS3，這種鏤空效果變得非常簡單。

線上演示原始碼下載

9、jQuery/CSS3實現網頁元素抖動特效

今天我們要來分享一款很酷的jQuery/CSS3動畫特效，它可以讓網頁中的元素進行抖動，抖動的引數也可以自定義設定。可以定義抖動的快慢、方向以及更為複雜的抖動效果。改應用基於jQuery和CSS3實現，實現起來也比較方便。

線上演示原始碼下載

以上就是9款驚豔的HTML5/CSS3動畫應用賞析，歡迎收藏分享。