8款效果驚艷的HTML5 3D動畫
HTML5 憑借著其強大的 3D 渲染能力,讓很多開發者都躍躍欲試,都想親自體驗一下 HTML5 的 3D 效果。今天本文就分享 8 款效果驚艷的 HTML5 3D 動畫,您可以撿現成的看看,順便也可以學習學習 HTML5 的相關知識。
1、HTML5 WebGL 水面水波蕩漾特效
之前已經向各位分享過一款很逼真的 HTML5 水波蕩漾特效,效果還算不錯。今天再向大家分享一款更加給力的 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 WebGL 水面水波蕩漾特效。今天我再向大家分享一款 HTML5 3D 衣服擺動動畫特效,動畫也是在 HTML5 Canvas 上完成,它模擬衣服晾在繩子上,點擊鼠標可以讓衣服擺動起來,就行風吹動它一樣,非常逼真炫酷。
5、HTML5 3D 立方體陣列有規律的旋轉動畫
這是一款基于 HTML5 的 3D 立方體動畫特效,特別的是,它不是一個立方體,而是由多個立方體組成的立方體陣列,同時陣列中的每一個立方體都會有規律的旋轉,從而產生很酷的動畫效果。
6、HTML5 3D 手掌動畫看起來很抽象
今天我們要來分享另外一款很酷的 HTML5 3D 動畫,它是用一個個像素點構造的 3D 立體手掌動畫,你可以拖動鼠標從不同的側面觀看這只非常抽象的手掌。
7、HTML5/CSS3 書本翻頁 3D 動畫
前段時間我們分享過很多牛叉的 HTML5 動畫,如果你對 HTML5 感興趣,可以移步至 HTML5 動畫欣賞學習。今天我們要分享一款基于 HTML5 和 CSS3 的書本翻頁 3D 動畫,當我們將鼠標滑過書本時,書本就會自動一頁頁翻過去,書本的 3D 效果非常不錯。
8、HTML5 3D 陰影文字特效
今天我們要來分享一款非常簡單大氣的 HTML5 3D 文字特效,這個 3D 文字特效是通過文字加粗以及文字陰影來實現的,效果非常不錯。
<span id="shareA4" class="fl">
</span>