乾貨分享 9款精挑細選的HTML5應用

對於前端開發者來說,分享一些優秀的HTML5應用可以直接拿來用,更重要的是可以激發創作的靈感。今天我們要分享9款精挑細選的HTML5應用,個個都是乾貨。

1、HTML5/CSS3滑塊動畫菜單 圖標動畫很酷

CSS3菜單我們之前已經分享很多了,有3D菜單、下拉菜單、Tab菜單等,具體大家可以移步至CSS3菜單欄目下查找。今天我們要分享的這款HTML5/CSS3滑塊動畫菜單非常酷,鼠標滑過菜單項時會有一個漂亮的遮罩移動過來,並且這款動畫菜單還有非常酷的圖標,菜單整體效果很大氣。

html5-css3-fluid-menu-with-icon

在線演示        源碼下載

2、HTML5 Canvas頭髮飄逸動畫 很酷的HTML5動畫

HTML5 Canvas動畫非常炫酷,很多有創意的開發者可以利用HTML5的Canvas特性創造出很多不錯的動畫特效。今天我們要分享一款HTML5 Canvas頭髮飄逸動畫,該動畫模擬頭髮飄動的效果,加上可愛的人臉,可以說非常有技術含量,更富有創意。

html5-hair-animation

在線演示        源碼下載

3、HTML5/CSS3帶日期區間的日期選擇插件

今天我們來分享一款實用的HTML5/CSS3日期選擇插件,這款日期選擇插件的外觀還是挺清新簡易的,但是整體來說還是挺漂亮的。另外,該日期選擇插件還有一個最大的特點,那就是可以自定義日期的區間,我們可以快速的制定區間範圍內的日期,非常方便。

html5-date-range-picker

在線演示        源碼下載

4、HTML5小車動畫 很酷的HTML5吉普車

有幾天沒有分享HTML5動畫了,之前很多HTML5動畫都是利用CSS3的一些特性和Canvas特性來完成,比如這個HTML5/CSS3實現蝙蝠俠人物動畫就利用CSS3的動畫特性,HTML5 Canvas模擬衣服撕扯動畫就利用了HTML5 Canvas特性。今天我們要分享一款利用HTML5/CSS3實現的吉普車動畫,小車可以水平滾動,非常逼真。

html5-css3-car-animation

在線演示        源碼下載

5、HTML5 Canvas畫板畫圖工具 可定義筆刷和畫布

HTML5 Canvas還有一個比較實用的應用,那就是網絡畫板,這樣我們就可以在網頁上直接進行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實現網絡畫圖的功能,我們可以自定義筆刷的類型、粗細、顏色,也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進行擴展,讓它的畫圖功能更加完善。

html5-canvas-draw

在線演示        源碼下載

6、HTML5/CSS3 3D文字特效 文字外翻效果

之前我們分享過一款CSS3 3D文字特效HTML5/CSS3文字投影特效,加上投影和漸變,效果還是非常不錯。今天我們再來分享一款很酷的HTML5/CSS3 3D文字特效,該文字特效的效果是鼠標滑過文字就會出現3D外翻的效果,非常不錯的一款文字特效。

html5-3d-letter-text

在線演示        源碼下載

7、CSS3波浪形菜單 結合背景超級絢麗

我們分享過許多各種各樣的CSS3菜單,應該說效果都比傳統的CSS菜單強悍。這次要分享的這款CSS3菜單有點特別,菜單的整體形狀類似波浪形,鼠標滑過菜單項時也會改變背景色表示該菜單項被激活。另外該CSS3菜單結合不錯的背景圖片效果更加震撼。

css3-wave-menu

在線演示        源碼下載

8、HTML5/CSS3時尚的圓盤時鐘動畫 帶當前日期

我們可以利用HTML5和CSS3來實現一些鐘錶動畫特效,效果都還不錯。今天我們要分享一款利用HTML5和CSS3的圓盤時鐘動畫,時鐘外觀非常時尚。更重要的功能是,該HTML5時鐘動畫還帶有當前的日期,這是很多時鐘所沒有的功能。

html5-css3-clock-with-date

在線演示        源碼下載

9、CSS3帶圖標提示插件 多主題顏色

在網頁中,我們操作完耗時的操作,最好給用戶一個提示,這個CSS3插件就實現這個提示功能。該CSS3提示功能有幾種不同的顏色,並且每一個提示框都有一個指定的小圖表。用戶可以點擊關閉按鈕來關閉提示框,提示框出現淡出的CSS3效果。

css3-notification

在線演示        源碼下載

以上就是9款精挑細選的HTML5應用,很不錯吧,歡迎收藏。

本文由html5tricks收集整理,轉載請務必保留原文鏈接
http://www.html5tricks.com/9-picked-html5-apps.html

發佈了20 篇原創文章 · 獲贊 4 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章