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