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

1、純CSS3實(shí)現(xiàn)打火機(jī)火焰動(dòng)畫(huà)

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

2、HTML5/CSS3圖片過(guò)濾歸類(lèi)應(yīng)用 三種過(guò)濾動(dòng)畫(huà)

今天我們要來(lái)分享一款基于HTML5和CSS3的圖片特效，它可以很方便地將各種圖片進(jìn)行歸類(lèi)和過(guò)濾，在歸類(lèi)過(guò)濾的過(guò)程中，圖片有非常酷的動(dòng)畫(huà)效果，并且，結(jié)合CSS3的特性，這里一共提供了3種炫酷的圖片過(guò)濾動(dòng)畫(huà)。

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

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

4、純CSS3 Tooltip提示 陰影邊框飛入動(dòng)畫(huà)

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

5、CSS3火焰效果文字特效

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

6、CSS3彈簧線(xiàn)圈動(dòng)畫(huà)

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

7、150多個(gè)純CSS3動(dòng)畫(huà)SVG圖標(biāo)

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

8、HTML5 SVG多折線(xiàn)圖表 圖表可縮放顯示

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

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

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

10、純CSS3實(shí)現(xiàn)自行車(chē)動(dòng)畫(huà) 非常逼真

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

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

By