HTML5的確能夠製做出很是絢麗的網頁動畫效果，尤爲是利用HTML5 Canvas特性和HTML5 3D特性，咱們更加能夠欣賞到超酷的動畫特效。今天我從html5tricks網站上整理了8款使人驚歎的HTML5 Canvas動畫教程，你們能夠一塊兒來看看。css
一、3D HTML5 Logo動畫 HTML5多視角3D旋轉動畫
HTML5 3D動畫實現起來很是方便，以前介紹過基於jQuery的3D旋轉插件是利用多張多視角圖片播放來實現的，而今天分享的這款HTML5 3D旋轉動畫是利用純HTML5技術實現的，該動畫實現了HTML5 Logo旋轉的效果。html
二、HTML5版Flappy Bird遊戲 僅65行Javascript代碼
Flappy Bird相信你們都很熟悉了，2014年最熱門的手機遊戲之一。Flappy Bird這款遊戲是一位來自越南河內的獨立遊戲開發者阮哈東開發，形式簡易但難度極高的休閒遊戲，很容易讓人上癮。今天咱們用HTML5來重寫這款Flappy Bird遊戲，值得注意的是，利用Phaser框架，只需65行Javascript代碼便可實現HTML5版的Flappy Bird遊戲。按空格鍵控制小鳥，試試看吧。jquery
三、HTML5 WebGL水面水波盪漾特效 可多視角展現 超逼真
以前已經向各位分享過一款很逼真的HTML5水波盪漾特效，效果還算不錯。今天再向你們分享一款更加給力的HTML5水波動畫，畫面上是一個大水池，水池底部是一顆大石頭，在水面上點擊便可泛起水波，加上模擬光的照射，水波比上一款特效更加生動逼真。另外你也能夠拖動石頭讓其在池底滾動，也能夠拖動畫面多視角觀看該HTML5水波動畫。web
四、HTML5版切水果遊戲 HTML5遊戲極品
這是一款由百度JS小組提供的HTML5版切水果遊戲，記得切水果遊戲當年很是火，今天我找到了一款基於HTML5實現的網頁版切水果遊戲。雖然和原版的切水果遊戲相比功能不怎麼完善，可是該HTML5切水果遊戲也算有聲有色，畫面也十分華麗。瀏覽器
五、CSS3 飄帶菜單 超酷3D CSS3菜單
以前咱們分享過很多漂亮的CSS3菜單，CSS3/jQuery創意盒子動畫菜單、CSS3垂直菜單 菜單有立體動畫視覺、CSS3多級下拉菜單 彈性展開下拉動畫。今天要分享的這款CSS3菜單很是特別，菜單是呈飄帶狀的，鼠標滑過菜單項時，菜單項會凸顯出來，表現的很是立體動感。app
六、HTML5跳傘遊戲 看誰先安全降落地面
今天我再來分享一款有趣的HTML5遊戲，HTML5跳傘遊戲，是一款很是不錯的HTML5休閒小遊戲，主要應用了HTML5的重力感應效果。遊戲一共四個玩家，主要是比誰先安全降落地面，綠色信號燈亮時，按下「X」鍵開始降落，而後再按「X」鍵打開降落傘進行安全降落，你須要控制好時機來按下「X」鍵和對手們比誰先安全降落。你們也能夠在下面下載源代碼學習分享。
七、HTML5視頻播放器Video.Js 播放器外觀可自定義
之前咱們都是使用flash來製做視頻播放器，如今HTML5逐漸發展起來了，咱們也能夠利用HTML5來製做播放器。今天給你們介紹一款HTML5播放器Video.Js，改HTML5視頻播放器能夠本身定義外觀，包括總體顏色，播放按鈕定製等功能。整體來講，Video.Js是一款很不錯的視頻播放器。
八、HTML5樹葉飄落動畫 HTML5動畫經典
以前咱們分享幾款經典的HTML5動畫：HTML5愛心表白動畫、HTML5視頻破碎重組特效、HTML5像素粉碎圖片動畫。今天再來分享一款HTML5樹葉飄落動畫，這款HTML5樹葉飄落動畫是基於webkit內核的，因此須要webkit內核的瀏覽器才能播放該動畫，效果然的很是酷。
以上就是8款使人驚歎的HTML5 Canvas動畫特效，歡迎收藏分享。