HTML5確實(shí)是一項(xiàng)改革瀏覽器乃至整個(gè)軟件行業(yè)的新技術(shù)，它可以幫助我們Web開發(fā)者很方便地在網(wǎng)頁上實(shí)現(xiàn)動(dòng)畫特效，而無需臃腫的Flash作為支撐。本文分享7個(gè)頂級(jí)的HTML5 Canvas 動(dòng)畫，都有非常不錯(cuò)的效果。

1、3D HTML5 Logo動(dòng)畫 HTML5多視角3D旋轉(zhuǎn)動(dòng)畫

HTML5 3D動(dòng)畫實(shí)現(xiàn)起來非常方便，之前介紹過基于jQuery的3D旋轉(zhuǎn)插件是利用多張多視角圖片播放來實(shí)現(xiàn)的，而今天分享的這款HTML5 3D旋轉(zhuǎn)動(dòng)畫是利用純HTML5技術(shù)實(shí)現(xiàn)的，該動(dòng)畫實(shí)現(xiàn)了HTML5 Logo旋轉(zhuǎn)的效果。

[[151039]]

在線演示        源碼下載

2、HTML5版Flappy Bird游戲 僅65行Javascript代碼

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

在線演示        源碼下載

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

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

在線演示        源碼下載

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

這是一款由百度JS小組提供的HTML5版切水果游戲，記得切水果游戲當(dāng)年非常火，今天我找到了一款基于HTML5實(shí)現(xiàn)的網(wǎng)頁版切水果游戲。雖然和原版的切水果游戲相比功能不怎么完善，但是該HTML5切水果游戲也算有聲有色，畫面也十分華麗。

在線演示        源碼下載

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

之前我們分享過不少漂亮的CSS3菜單，CSS3/jQuery創(chuàng)意盒子動(dòng)畫菜單、CSS3垂直菜單 菜單有立體動(dòng)畫視覺、CSS3多級(jí)下拉菜單 彈性展開下拉動(dòng)畫。今天要分享的這款CSS3菜單非常特別，菜單是呈飄帶狀的，鼠標(biāo)滑過菜單項(xiàng)時(shí)，菜單項(xiàng)會(huì)凸顯出來，表現(xiàn)的非常立體動(dòng)感。

在線演示        源碼下載

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

今天我再來分享一款有趣的HTML5游戲，HTML5跳傘游戲，是一款非常不錯(cuò)的HTML5休閑小游戲，主要應(yīng)用了HTML5的重力感應(yīng)效果。游戲一共四個(gè)玩家，主要是比誰先安全降落地面，綠色信號(hào)燈亮?xí)r，按下“X”鍵開始降落，然后再按“X”鍵打開降落傘進(jìn)行安全降落，你需要控制好時(shí)機(jī)來按下“X”鍵和對(duì)手們比誰先安全降落。大家也可以在下面下載源代碼學(xué)習(xí)分享。

在線演示        源碼下載

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

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

在線演示        源碼下載

如果您有更好的HTML5動(dòng)畫資源，也歡迎跟我們分享。