8款效果驚豔的HTML5 3D動畫

edithfang發表於2014-06-24

1、HTML5 WebGL水面水波盪漾特效
之前已經向各位分享過一款很逼真的HTML5水波盪漾特效,效果還算不錯。今天再向大家分享一款更加給力的HTML5水波動畫,畫面上是一個大水池,水池底部是一顆大石頭,在水面上點選即可泛起水波,加上模擬光的照射,水波比上一款特效更加生動逼真。另外你也可以拖動石頭讓其在池底滾動,也可以拖動畫面多視角觀看該HTML5水波動畫。

html5-webgl-water-effect

線上演示 原始碼下載

2、HTML5 Canvas 3D旋轉物體動畫 模糊發光特效

HTML5 3D動畫應用非常廣泛,我們之前也分享過很多炫酷的HTML5動畫應用。今天要介紹的這款HTML53D動畫是一個旋轉的物體,並且利用CSS3的特性,物體會發出模糊和發光的動畫特效,旋轉起來效果特別酷。

html5-3d-rotation-with-shine

線上演示 原始碼下載

3、HTML5 3D旋轉圖片相簿 可滑鼠懸停

圖片特效在HTML5應用中十分廣泛,我們也在html5tricks上收集了不少HTML5圖片特效,今天要分享的這款HTML5 3D旋轉圖片相簿又非常絢麗,和之前分享的這款HTML5/CSS3 3D環形圖片牆類似,也是一面立體的圖片牆,圖片不停的切換,滑鼠滑過圖片時即可啟用圖片檢視。

html5-3d-images-gallery

線上演示 原始碼下載

4、HTML5 3D衣服擺動特效

前面我們介紹過很多HTML5 3D動畫特效,最經典的要算HTML5 WebGL水面水波盪漾特效。今天我再向大家分享一款HTML5 3D衣服擺動動畫特效,動畫也是在HTML5Canvas上完成,它模擬衣服晾在繩子上,點選滑鼠可以讓衣服擺動起來,就行風吹動它一樣,非常逼真炫酷。

html5-3d-cloth

線上演示 原始碼下載

5、HTML5 3D立方體陣列 有規律的旋轉動畫

這是一款基於HTML5的3D立方體動畫特效,特別的是,它不是一個立方體,而是由多個立方體組成的立方體陣列,同時陣列中的每一個立方體都會有規律的旋轉,從而產生很酷的動畫效果。之前我們也分享過一些HTML5立方體動畫,比如CSS3 3D立方體動畫 表面顏色可漸變

html5-3d-cube-list-1

線上演示 原始碼下載

6、HTML5 3D手掌動畫 看起來很抽象

今天我們要來分享另外一款很酷的HTML5 3D動畫,它是用一個個畫素點構造的3D立體手掌動畫,你可以拖動滑鼠從不同的側面觀看這隻非常抽象的手掌。另外,我再推薦一款HTML53D動畫:HTML5 SVG 3D蝴蝶飛舞動畫

html5-3d-hand

線上演示 原始碼下載

7、HTML5/CSS3書本翻頁3D動畫

前段時間我們分享過很多牛叉的HTML5動畫,如果你對HTML5感興趣,可以移步至HTML5動畫欣賞學習。今天我們要分享一款基於HTML5和CSS3的書本翻頁3D動畫,當我們將滑鼠滑過書本時,書本就會自動一頁頁翻過去,書本的3D效果非常不錯。

html5-css3-book

線上演示 原始碼下載

8、HTML5 3D陰影文字特效

今天我們要來分享一款非常簡單大氣的HTML5 3D文字特效,這個3D文字特效是通過文字加粗以及文字陰影來實現的,效果非常不錯。同時我們在html5tricks網站上也分享過很多炫酷的文字特效,比如CSS3文字陰影效果 陰影角度可隨滑鼠變化動感的CSS3 Loading文字特效

html5-3d-text-shadow

線上演示 原始碼下載
以上就是8款效果驚豔的HTML5 3D動畫,歡迎收藏分享。

本文轉載自:http://www.html5tricks.com/8-wonderful-html5-3d-effect.html
相關閱讀
評論(0)

相關文章