7款值得你心動的HTML5動畫和遊戲

---

利用HTML5製作動畫和遊戲再也簡單不過了，只需要你擁有不錯的創意和靈感，當然需要一些畫面的設計能力，另外就交給HTML5吧。今天分享的7款HTML5動畫和遊戲一定會讓你心動不已，一起來看看吧。

1、HTML5 Canvas粒子效果文字動畫特效

之前我們分享過很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我們要來分享一款基於HTML5Canvas的文字特效，輸入框中輸入想要展示的文字，回車後即可在canvas上繪製出粒子效果的文字動畫，相當酷的動畫效果。

線上演示 原始碼下載

2、HTML5街頭霸王遊戲

還記得以前我們分享的一些HTML5遊戲麼？點進去看看吧，是不是很酷。今天我們又要來分享一款HTML5街頭霸王遊戲，遊戲中我們可以控制人物實現揮拳、踢腳、放大招等HTML5特效。可以說，用HTML5製作遊戲相對比較簡單，也很有意思。

線上演示 原始碼下載

3、HTML5實現會跳舞的3D立方體動畫

今天要為大家分享一款很酷的HTML5動畫特效——會跳舞的3D立方體。我們將幾個小立方體排成幾列幾行，讓後每一個立方體都按照一定的規律上下跳動，形成這款HTML5跳舞的3D立方體。另外，我們可以通過對右上角皮膚控制立方體數目、大小等引數。

線上演示 原始碼下載

4、HTML5五子棋遊戲 畫面超酷 可設定難度

前幾天我向大家分享過一款HTML5中國象棋遊戲，效果令人驚歎，小編的實力很難勝過電腦。今天我要向大家分享一款HTML5五子棋遊戲，不僅遊戲畫面非常華麗，而且可以自己設定難度，並且可以選擇人機對戰還是人人對戰，這款HTML5五子棋遊戲絕對稱得上HTML5遊戲中的極品。

線上演示 原始碼下載

5、純CSS3實現3D太空飛船 多視角動畫演示

這是一款用純CSS3打造的3D太空飛船動畫，從夜空背景，到飛船上的每一個細節，都使用了CSS3來實現，所以儘管是比較複雜的頁面，載入速度也很快。另外，這款CSS3飛船動畫可以在左上角的控制皮膚中控制飛船的不同視角，同時也可以開啟和關閉飛船尾部的螺旋槳，非常逼真的純CSS3動畫。

線上演示 原始碼下載

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

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

線上演示 原始碼下載

7、HTML5 Canvas雷達掃描動畫特效

這是一款基於HTML5 Canvas的雷達掃描動畫特效，canvas是HTML5特有的畫布工具，我們可以在canvas上繪製任意元素，包括3D元素。今天分享的這款雷達掃描動畫就是利用了canvas的靈活特性，利用js在canvas上繪製這些美麗的掃描線條。

線上演示 原始碼下載

以上就是7款值得你心動的HTML5動畫和遊戲，歡迎收藏和分享。

本文作者：html5tricks –超人