1. 程式人生 > >分享8款令人驚歎的HTML5 Canvas動畫特效

分享8款令人驚歎的HTML5 Canvas動畫特效

HTML5的確可以製作出非常絢麗的網頁動畫效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我們更加可以欣賞到超酷的動畫特效。今天我從html5tricks網站上整理了8款令人驚歎的HTML5 Canvas動畫教程,大家可以一起來看看。

1、3D HTML5 Logo動畫 HTML5多視角3D旋轉動畫

HTML5 3D動畫實現起來非常方便,之前介紹過基於jQuery的3D旋轉外掛是利用多張多視角圖片播放來實現的,而今天分享的這款HTML5 3D旋轉動畫是利用純HTML5技術實現的,該動畫實現了HTML5 Logo旋轉的效果。

3d-html5-logo-animation 線上演示 / 原始碼下載

2、HTML5版Flappy Bird遊戲 僅65行Javascript程式碼

Flappy Bird相信大家都很熟悉了,2014年最熱門的手機遊戲之一。Flappy Bird這款遊戲是一位來自越南河內的獨立遊戲開發者阮哈東開發,形式簡易但難度極高的休閒遊戲,很容易讓人上癮。今天我們用HTML5來重寫這款Flappy Bird遊戲,值得注意的是,利用Phaser框架,只需65行Javascript程式碼即可實現HTML5版的Flappy Bird遊戲。按空格鍵控制小鳥,試試看吧。

flappy-bird 線上演示 / 原始碼下載

3、HTML5 WebGL水面水波盪漾特效 可多視角展示 超逼真

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

html5-webgl-water-effect 線上演示 / 原始碼下載

4、HTML5版切水果遊戲 HTML5遊戲極品

這是一款由百度JS小組提供的HTML5版切水果遊戲,記得切水果遊戲當年非常火,今天我找到了一款基於HTML5實現的網頁版切水果遊戲。雖然和原版的切水果遊戲相比功能不怎麼完善,但是該HTML5切水果遊戲也算有聲有色,畫面也十分華麗。

html5-fruit-ninja 線上演示 / 原始碼下載

5、CSS3 飄帶選單 超酷3D CSS3選單

css3-3d-ribbon-menu 線上演示 / 原始碼下載

6、HTML5跳傘遊戲 看誰先安全降落地面

今天我再來分享一款有趣的HTML5遊戲,HTML5跳傘遊戲,是一款非常不錯的HTML5休閒小遊戲,主要應用了HTML5的重力感應效果。遊戲一共四個玩家,主要是比誰先安全降落地面,綠色訊號燈亮時,按下“X”鍵開始降落,然後再按“X”鍵開啟降落傘進行安全降落,你需要控制好時機來按下“X”鍵和對手們比誰先安全降落。大家也可以在下面下載原始碼學習分享。

html5-jumper-game 線上演示 / 原始碼下載

7、HTML5視訊播放器Video.Js 播放器外觀可自定義

以前我們都是使用flash來製作視訊播放器,現在HTML5逐漸發展起來了,我們也可以利用HTML5來製作播放器。今天給大家介紹一款HTML5播放器Video.Js,改HTML5視訊播放器可以自己定義外觀,包括整體顏色,播放按鈕定製等功能。總體來說,Video.Js是一款很不錯的視訊播放器。

html5-video-js 線上演示 / 原始碼下載

8、HTML5樹葉飄落動畫 HTML5動畫經典

之前我們分享幾款經典的HTML5動畫:HTML5愛心表白動畫HTML5視訊破碎重組特效HTML5畫素粉碎圖片動畫。今天再來分享一款HTML5樹葉飄落動畫,這款HTML5樹葉飄落動畫是基於webkit核心的,所以需要webkit核心的瀏覽器才能播放該動畫,效果真的非常酷。

css3-fall-leaves 線上演示 / 原始碼下載

以上就是8款令人驚歎的HTML5 Canvas動畫特效,歡迎收藏分享。