2015-5-18 藍藍設計的小編
藍藍設計( paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源:http://www.ithome.com/html/soft/90955.htm
談到網頁,不得不提到HTML5。憑借著其強大的3D渲染能力,HTML5讓很多開發者都躍躍欲試,都想親自體驗一下HTML5的3D效果。今天本文就分享8款效果驚艷的HTML5 3D動畫,您可以撿現成的看看,順便也可以學習學習HTML5的相關知識。
1、HTML5 WebGL水面、水波蕩漾
今天再向大家分享一款更加給力的HTML5水波動畫,畫面上是一個大水池,水池底部是一顆大石頭,在水面上點擊即可泛起水波,加上模擬光的照射,水波比上一款更加生動逼真。
另外你也可以拖動石頭讓其在池底滾動,也可以拖動畫面多視角觀看該HTML5水波動畫。
2、HTML5 Canvas 3D旋轉物體動畫、模糊發光
HTML5 3D動畫應用非常廣泛,我們之前也分享過很多炫酷的HTML5動畫應用。今天要介紹的這款HTML5 3D動畫是一個旋轉的物體,并且利用CSS3的特性,物體會發出模糊和發光的動畫,旋轉起來效果特別酷。
3、HTML5 3D旋轉圖片相冊、可鼠標懸停圖片
在HTML5應用中十分廣泛,我們也在html5tricks上收集了不少HTML5圖片,今天要分享的這款HTML5 3D旋轉圖片相冊又非常絢麗,和之前分享的這款HTML5/CSS3 3D環形圖片墻類似,也是一面立體的圖片墻,圖片不停的切換,鼠標滑過圖片時即可激活圖片查看。
4、HTML5 3D衣服擺動
今天我向大家分享一款HTML5 3D衣服擺動動畫,動畫也是在HTML5 Canvas上完成,它模擬衣服晾在繩子上,點擊鼠標可以讓衣服擺動起來,就行風吹動它一樣,非常逼真炫酷。
5、HTML5 3D立方體陣列、有規律的旋轉動畫
這是一款基于HTML5的3D立方體動畫,特別的是,它不是一個立方體,而是由多個立方體組成的立方體陣列,同時陣列中的每一個立方體都會有規律的旋轉,從而產生很酷的動畫效果。之前我們也分享過一些HTML5立方體動畫,比如CSS3 3D立方體動畫表面顏色可漸變。
6、HTML5 3D手掌動畫、看起來很抽象
今天我們要來分享另外一款很酷的HTML5 3D動畫,它是用一個個像素點構造的3D立體手掌動畫,你可以拖動鼠標從不同的側面觀看這只非常抽象的手掌。另外,我再推薦一款HTML5 3D動畫:HTML5 SVG 3D蝴蝶飛舞動畫。
7、HTML5/CSS3書本翻頁3D動畫
今天我們要分享一款基于HTML5和CSS3的書本翻頁3D動畫,當我們將鼠標滑過書本時,書本就會自動一頁頁翻過去,書本的3D效果非常不錯。
8、HTML5 3D陰影文字
今天我們要來分享一款非常簡單大氣的HTML5 3D文字,這個3D文字是通過文字加粗以及文字陰影來實現的,效果非常不錯。同時我們在html5tricks網站上也分享過很多炫酷的文字,比如CSS3文字陰影效果陰影角度可隨鼠標變化、動感的CSS3 Loading文字。
以上就是8款效果驚艷的HTML5 3D動畫,歡迎收藏分享。