新的一周開始了,小編繼續要為大家分享實用超酷的HTML5應用,今天分享的這9款最新HTML5/CSS3應用你一定會很喜歡,一起來看看。
1、HTML5 Canvas模拟衣服撕扯動畫 超級逼真
今天又要來推薦一款HTML5 Canvas動畫,是一個模拟衣服撕扯動畫,效果非常逼真。剛開始衣服挂在繩子上,用滑鼠拖拽衣服即可讓衣服擺動起來,當你拖拽的很用力時,你會發現,衣服被撕破了。該HTML5動畫會捕獲到滑鼠拖拽的用力程度,進而來判斷并實作衣服應該破損的程度,越用力,衣服被撕破的速度越快,趕緊來體驗一下這個HTML5動畫吧。
線上示範 / 源碼下載下傳
2、純CSS3繪制可愛小男孩動畫 超酷面部表情
之前我們分享過幾個純CSS3動畫特效,比如純CSS3人物行走動畫就非常酷,還有純CSS3 Android Logo動畫繪制也很酷。今天我們又要來分享一款純CSS3繪制的可愛小男孩動畫,除了繪制的小男孩逼真可愛外,其面部表情也十分酷。整個動畫是利用純CSS3實作,沒有用圖檔和JS,不知道你們的浏覽器中效果怎麼樣。
線上示範 / 源碼下載下傳
3、HTML5 3D圖檔折疊特效 超炫酷圖檔特效
我們之前介紹過很多HTML5 3D圖檔效果,比如HTML5/CSS3 3D環形圖檔牆、HTML5 3D相冊浏覽等等。今天我們再來分享一款HTML5 3D圖檔折疊特效,滑鼠滑過圖檔時,折疊好的圖檔便會展開,滑鼠離開圖檔時,圖檔又會折疊起來,效果非常酷。
線上示範 / 源碼下載下傳
4、HTML5 3D骨牌圖檔特效 帶文字描述
今天分享一款很特别的HTML5 3D圖檔特效,當滑鼠滑過圖檔時,平面的圖檔即會呈現3D的效果,和這款HTML5 3D圖檔折疊特效類似,也是通過滑鼠滑過來展現3D效果。另外,這款HTML5 3D骨牌圖檔特效還可以設定圖檔描述資訊。
線上示範 / 源碼下載下傳
5、HTML5/CSS3 3D立體功能按鈕 超酷CSS3按鈕
之前我們分享過很多精彩的CSS3按鈕,像這款純CSS3 3D牛奶樣式按鈕,非常酷,還有這款CSS3發光社會分享按鈕,也挺不錯的。今天要分享的這款CSS3 3D按鈕十分大氣,按鈕在點選的時候也有立體的效果,非常酷的一款CSS3 3D按鈕。
線上示範 / 源碼下載下傳
6、HTML5/CSS3原圖對比檢視特效 HTML5圖檔特效
說到HTML5圖檔特效,我們應該已經分享過很多了,大家可以到HTML5圖檔欄目中檢視。今天我們再來看一款不一樣的HTML5圖檔特效,這款HTML5應用可以将兩張相似的圖檔進行細節上的對比,我們隻需移動滑鼠即可以觀察到兩張圖檔的不同點,非常實用友善。
線上示範 / 源碼下載下傳
7、HTML5相冊照片浏覽器 可連接配接Flickr照片服務
以前我們經常會分享一些jQuery相冊浏覽插件,效果不錯,實用性也很強。不過如果能利用HTML5來實作相冊浏覽器,那麼相冊浏覽效果肯定會更加炫酷。今天分享的這款HTML5相冊浏覽器可以連接配接到Flickr擷取照片,也可以連接配接到youtube擷取視訊,照片在初始化的時候有波浪般的效果。
線上示範 / 源碼下載下傳
8、HTML5/CSS3 3D下拉折疊菜單 超炫CSS3菜單動畫
之前我們介紹過很多CSS3菜單了,效果都十分華麗炫酷,但是這些CSS3菜單基本都是二維平面菜單,今天要分享的這款HTML5/CSS3菜單卻是3D的效果。菜單展現時出現折疊下拉的動畫特效,菜單也可以收起,滑鼠滑過菜單項的效果也很不錯。
線上示範 / 源碼下載下傳
9、HTML5 3D旋轉圖檔相冊 可滑鼠懸停
圖檔特效在HTML5應用中十分廣泛,我們也在html5tricks上收集了不少HTML5圖檔特效,今天要分享的這款HTML5 3D旋轉圖檔相冊又非常絢麗,和之前分享的這款HTML5/CSS3 3D環形圖檔牆類似,也是一面立體的圖檔牆,圖檔不停的切換,滑鼠滑過圖檔時即可激活圖檔檢視。
線上示範 / 源碼下載下傳
以上就是9款最新超酷HTML5/CSS3應用插件,歡迎收藏分享。