首頁 >web前端 >H5教程 >20個非常絢麗的HTML5/CSS3應用插件的詳細介紹(圖)

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

黄舟
黄舟原創
2017-03-09 15:58:202896瀏覽

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

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

13、純CSS3發光登入表單

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

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

線上示範    /    原始碼下載

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

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


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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

17、HTML5吃豆人遊戲PCMAN

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載

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

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

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

線上示範    /    原始碼下載


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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn