7款超炫的HTML5 Canvas 3D動畫效果

jopen 12年前發布 | 54K 次閱讀 HTML5

在以前,想要在瀏覽器中實現3D動畫效果是非常困難的,但是自從HTML5誕生之后,這就變得十分簡單了。遺憾的是,目前的瀏覽器對3D渲染效果還 不是非常理想,尤其是渲染速度,可能用chrome和safari會比較理想。下面給大家推薦幾個比較炫麗的HTML5 Canvas 3D動畫效果,應該能讓你眼前一亮。

1、HTML5 3D旋轉地球

這是一個使用HTML5 Canvas畫布實現的3D旋轉的地球模型,看上去十分逼真。

在線演示

7款超炫的HTML5 Canvas 3D動畫效果

2、HTML5動態瀑布效果

你得相信,這么強大的效果可是用HTML5制作出來的,不是拍攝的哦。

在線演示

7款超炫的HTML5 Canvas 3D動畫效果

3、HTML5 3D視頻碎片效果

你可以點擊視頻的任何一個地方,產生的碎片中依然在播放著視頻,在基于webkit的瀏覽器上觀看效果最好。

在線演示 /源碼下載

7款超炫的HTML5 Canvas 3D動畫效果

4、js cloth

三位空間中的二維圖像

在線演示

7款超炫的HTML5 Canvas 3D動畫效果

5、HTML5 3D Google搜索盒子

一個3D的Google圖片搜索盒子,非常有立體感。

在線演示 /源碼下載

7款超炫的HTML5 Canvas 3D動畫效果

6、HTML5雨滴下落效果

非常酷的雨滴下落效果。

在線演示 /源碼下載

7款超炫的HTML5 Canvas 3D動畫效果

7、三維分子結構

在線演示

7款超炫的HTML5 Canvas 3D動畫效果

以上是7個逼真的HTML5 3D動畫效果,希望大家喜歡,轉載請注明出處:html5_dev的專欄

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!