20個非常絢麗的HTML5/CSS3應用插件的詳細介紹（圖）

基於HTML5的應用程式現在已經非常廣泛，今天我們就來跟大家分享20款非常絢麗的HTML5/CSS3應用程式外掛程式。希望大家喜歡並分享給你的好友們。

1、HTML5影片破碎重組特效強大視覺衝擊

HTML5影片播放器很多，但是HTML5影片特效還是很少見的，這款HTML5影片破碎重組特效非常刺激，給人強大的視覺衝擊。點擊影片任意地方，HTML5將會將這些區域擊碎，過一段時間，這些被擊碎的影片碎片又會自動重新組合。是一款非常好的HTML5影片特效。

線上示範    /    原始碼下載

2、HTML5 3D Google搜尋小盒子大世界

HTML5真是能讓人想像千萬，居然動起了Google搜尋的主意，它利用HTML5技術將Google搜尋放到了一個小盒子裡，並弄起了3D搜尋。隨著滑鼠移動，HTML5 3D搜尋盒子也就轉動，非常立體。點擊搜尋按鈕，即可打開盒子進行Google搜尋。

線上示範    /    原始碼下載

3、CSS3/jQuery創意盒子動畫選單

#作為前端開發者，各種各樣的jQuery菜單見過不少，這款jQuery/CSS3菜單卻是別具一格，菜單項目嵌入到九宮格中，像小盒子一樣，加上溫馨的背景，菜單整體外觀十分可愛。點選選單項，盒子就會展開，展示該選單項目特定的內容。該CSS3選單在展開時也有不錯的動畫效果。

線上示範    /    原始碼下載

4、華麗的HTML5圖表可展現即時資料

HTML5在圖表應用上也十分廣泛，比起以前的網頁圖表，HTML5圖表製作更便捷，功能更強大。這款HTML5圖表外掛外觀十分華麗且專業，在數據展示方面也很有優勢，圖表不僅支援多維數據展示，而且支援區域選擇數據功能，利用該HTML5圖表可以更方便地管理你的數據。

線上示範    /    原始碼下載

5、HTML5重力感應遊戲甩甩領導的頭像

快過了，薪資沒漲多少吧，年終獎沒發吧，恨領導吧。現在就利用這款HTML5重力感應遊戲來盡情甩領導的頭像吧。製作一些你憎恨的領導者的頭像圖片，利用該HTML5重力感應遊戲插件來拖動滑鼠甩動這些頭像，叫你不加工資…叫你不加工資…

線上示範    /    原始碼下載

6、HTML5 3D立體圖片旋轉播放展示

自從HTML5技術的出現，我們可以在瀏覽器上看到越來越多的3D特效。這款HTML5 3D立體圖片旋轉播放展示工具就體現了強大的HTML5 3D功能。當然這需要支援HTML5 3D功能的瀏覽器才能觀看這個3D圖片示範。

線上示範    /    原始碼下載

7、HTML5中國象棋遊戲自訂象棋難度

棋遊戲在桌上遊戲中已經非常成熟，中國象棋的版本也非常多。今天這款基於HTML5技術的中國象棋遊戲非常有特色，我們不僅可以選擇中國象棋的遊戲難度，而且可以切換棋盤的樣式。程式寫累了，喝上一杯咖啡，和電腦對弈幾把吧，相信這HTML5中國象棋遊戲的實現算法你比較清楚，可以打開源碼來研究一下這款HTML5中國象棋遊戲。

線上示範    /    原始碼下載

#8、HTML5播放器神話卡帶式古典播放器

#這是一款樣式非常古典，但又是非常時尚的HTML5播放器，說它是古典播放器，是因為這種卡帶式的HTML5播放器比較古老，說它時尚，是因為現在的HTML5播放器很少有這種樣式的，非常有創意。如果你想為你的個人主要添加一款個人化的播放器，那麼這款HTML5卡帶式古典播放器可以選擇一下，個人認為這是HTML5播放器的神話，非常經典。

線上示範    /    原始碼下載

9、HTML5超級瑪莉遊戲重體驗HTML5遊戲經典

#還記得小時候一起玩過的超級瑪莉冒險遊戲嗎？是的，那是我們小時候很火紅的一款遊戲，今天老外利用HTML5技術讓超級瑪麗可以在網頁上跑了，HTML5版的超級瑪麗雖然沒有原版的功能強大，但是如果你有興趣，完全可以把它寫得完善了。 HTML5真的很強大，HTML5遊戲方面更是犀利。

線上示範    /    原始碼下載

10、浪漫程式設計師HTML5愛心告白動畫

我們程式設計師在追求愛情方面也是非常浪漫的，以下是一位同學利用自己所學的HTML5知識自製的HTML5愛心表白動畫，畫面非常溫馨甜蜜，這樣的創意很容易打動女孩，如果你是單身的程式設計師，也趕快來製作自己的愛心表白動畫吧。

線上示範    /    原始碼下載

11、CSS3密碼強度驗證表單碼速表樣式

當我們在網站上註冊會員時，輸入強大較大的密碼會大大增加帳號安全性，那麼什麼樣的密碼才會比較安全呢？這款CSS3密碼強度驗證表單外掛程式可以提示你目前輸入密碼的安全級別，有趣的是該密碼強度驗證外掛程式的樣式酷似碼速表，隨著密碼強度的加大，碼速表指針就會順時針旋轉，當然旋轉的特效是利用CSS3結合jQuery來實現的。

線上示範    /    原始碼下載

12、純CSS3 Android Logo動畫繪圖小手還會動

利用CSS3可以繪製許多複雜的圖案圖標，今天就利用純CSS3實現Android Logo圖標，該CSS3 Android Logo主要利用了CSS3中的圓角等屬性，繪製出來的Logo非常逼真，同時該Android Logo還有動畫效果，滑鼠滑過Android小人的頭和手時，小手還能夠揮動。

線上示範    /    原始碼下載

13、純CSS3發光登入表單

我們看過很多CSS3表單，製作都很精美，今天介紹的這款CSS3表單不但外觀華麗，而且伴隨著顏色發光動畫。當滑鼠啟動表單時，表單周圍就會出現顏色漸變的發光動畫，配合黑色的背景，整個CSS3表單顯得格外亮麗。更重要的是，這個CSS3發光錶單基本上是用CSS3實現，很少的JS程式碼，在CSS3引擎上優化非常明顯。

線上示範    /    原始碼下載

14、CSS3 3D進度條按鈕18款精美樣式

我們在網頁上提交資料的時候常常會看到進度條，不過大部分進度條都是在網頁其他地方顯示，例如彈出一個視窗。這款CSS3實現的進度條是顯示在按鈕上的，可以更直觀的體現出用戶提交的進度情況，該CSS3進度條按鈕樣式非常漂亮，在支援3D的瀏覽器上還能有3D立體的效果，而且進度條展現形式很多，一共18種樣式。

15、HTML5水波蕩漾動畫特效非常逼真

在現實生活中，我們常可以看到水波的效果，雨滴落到小河中，河裡必定泛起了水波。今天我們用HTML5模擬了水波蕩漾效果，點擊河水的圖片，即可從點擊處開始泛起水波，並向遠處伸展。這個利用HTML5模擬出來的水波效果非常逼真，不過有點耗CPU。

線上示範    /    原始碼下載

16、HTML5雨點下落動畫讓雨點飛起來

利用HTML5實現雨點下落需要注意一下幾點：1、雨點的大小和形狀；2、雨點下落的速度控制，注意應該是加速下落。這個示範動畫就很生動的模擬了雨點下落動畫。當滑鼠移上去時，就會形成3個雨點並向下掉落。 HTML5技術真的非常方便。

線上示範    /    原始碼下載

17、HTML5吃豆人遊戲PCMAN

今天又要介紹一款不錯的HTML5遊戲，HTML5吃豆人遊戲，畫面上有一個吃豆人和一群怪物，你需要控制吃豆人移動吃掉路上的小豆子，一旦吃豆人遇到怪物被吃掉的時候，你就GAME OVER了。這款HTML5遊戲還有一點沒完善，就是吃豆人碰到怪物的時候不能被怪物吃掉，有興趣的同學可以繼續把它完善。 HTML5遊戲開發不僅需要技術，也需要創意。

線上示範    /    原始碼下載

18、HTML5像素粉碎圖片動畫圖片灑落一地

這款HTML5圖片動畫特效你絕對想不到，它將一張圖片粉碎成許多像素顆粒，點擊圖片後，這些像素顆粒邊掉落在地上，繼續點擊，粉碎的像素圖片顆粒又會重新組合成完整的圖片。用HTML5技術實現這種圖片粉碎效果還挺簡單的，有興趣的同學可以下載原始碼來學習。

線上示範    /    原始碼下載

19、HTML5太空戰機遊戲有聲有色

這又是一款製作精良的HTML5遊戲，該HTML5遊戲的主角是一架英勇威武的太空戰機，進入遊戲後按」Z」鍵發射子彈，消滅敵機。這款HTML5戰機遊戲的特色是：1、遊戲畫面非常華麗逼真，並且加入聲音元素，讓遊戲更加迷人；2、遊戲元素很多，敵機類型和發射子彈類型也很多，讓玩家不會枯燥。

線上示範    /    原始碼下載

#20、HTML5動畫圖片播放器高階大氣

#我們看過很多圖片播放外掛程式（焦點圖），很多都基於jQuery。今天介紹的HTML5圖片播放器很特別，它不僅在圖片間切換有過渡動畫效果，而且在切換時圖片中的元素也將出現動畫效果，比如圖中的文字移動、打散、重新組合等。這款HTML5動畫圖片播放器算是高階大氣上檔次。

線上示範    /    原始碼下載

以上是20個非常絢麗的HTML5/CSS3應用插件的詳細介紹（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！