今天給大家介紹10個絢麗的HTML5應(yīng)用，方便大家學(xué)習(xí)，也將應(yīng)用的源碼整理了一下發(fā)給大家。

1、純CSS3實現(xiàn)打火機火焰動畫

這又是一款很酷的純CSS3動畫特效，它是一個可以點燃的打火機，當(dāng)你用鼠標(biāo)滑過這只打火機時，打火機就會打開，然后開始出現(xiàn)火焰燃燒的動畫特效。另外要說明的是，整個動畫都是利用純CSS3實現(xiàn)的，沒有一行JS代碼，小伙伴們，這個CSS3動畫是不是很酷？

2、HTML5/CSS3圖片過濾歸類應(yīng)用 三種過濾動畫

今天我們要來分享一款基于HTML5和CSS3的圖片特效，它可以很方便地將各種圖片進行歸類和過濾，在歸類過濾的過程中，圖片有非?？岬膭赢嬓?果，并且，結(jié)合CSS3的特性，這里一共提供了3種炫酷的圖片過濾動畫。

3、HTML5視頻播放器 超酷播放器UI界面

今天要分享一款UI界面非常出色HTML5視頻播放器，播放器具備播放/暫停、音量調(diào)節(jié)、全拼播放等功能，應(yīng)該也算是比較完善了的。我們也可以看看之前發(fā)布過的HTML5視頻播放器，像，也非?？帷?/p>

4、純CSS3 Tooltip提示 陰影邊框飛入動畫

Tooltip可以既可以節(jié)省網(wǎng)頁寶貴的空間，而且又可以讓用戶快速得到想要的信息，今天要分享的這款CSS3 Tooltip外觀非常漂亮，而且是純CSS3實現(xiàn)，Tooltip的邊框設(shè)置了陰影特效，而且Tooltip提示框也有飛入的動畫效果，是一款挺酷的CSS3 Tooltip應(yīng)用。

5、CSS3火焰效果文字特效

記得我們以前分享過一款很酷的CSS3火焰文字特效，把它挖出來看看：。今天我們要來再分享一款CSS3火焰效果的文字特效，和之前那個文字特效不同的是，這個是靜態(tài)的，沒有動畫的效果，不過也非常酷。

6、CSS3彈簧線圈動畫

今天我們要來分享一款純CSS3實現(xiàn)的動畫特效，這款CSS3動畫效果是模擬彈簧線圈的特性。它可以不停的轉(zhuǎn)動和扭動彈簧線圈，讓整個彈簧動畫非常逼真和動感。另外由于彈簧被扭動，所以從不同的角度線圈的顏色會有細(xì)微的變化。

7、150多個純CSS3動畫SVG圖標(biāo)

CSS3真的很強大，但SVG的實力也不容小覷，今天我們要將它們兩個有機結(jié)合，分享給大家150多個非常有趣的純CSS3動畫SVG圖標(biāo)。這150個SVG圖標(biāo)中，都擁有鼠標(biāo)滑過的動畫特效，有的是陰影特效，也有的是動感的動畫，這些圖標(biāo)真的很酷。

8、HTML5 SVG多折線圖表 圖表可縮放顯示

今天我們要來介紹一款基于HTML5 SVG的折線圖表，該款圖片支持多條折線重疊在一起顯示，可以方便地比較不同顏色折線的數(shù)據(jù)。另外圖表還有一個特點，就是可以縮放和移動，這大大方便了用戶瀏覽圖表數(shù)據(jù)，非常人性化。

9、基于Bootstrap的CSS3下拉菜單 菜單3D立體效果

Bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包，基于Bootstrap框架，我們可以方便地制作漂亮的UI界面。今天要分享的這款CSS3下拉菜單就是基于Bootstrap的，下拉子菜單的外觀也非常不錯，同時菜單也具有3D立體的視覺效果。

10、純CSS3實現(xiàn)自行車動畫 非常逼真

還記得那款純CSS3實現(xiàn)的小豬、老鼠、小牛嗎，簡直是太形象生動了。這次我們要來分享一款利用純CSS3實現(xiàn)的自行車動畫，與前面那款不同的是，這個自行車是可以運動的，就像有一個人在騎車一樣，車輪也會轉(zhuǎn)動，非常逼真的一款動畫效果。

以上就是10款效果驚艷的HTML5應(yīng)用和源碼，歡迎收藏分享。

By