HTML5逆天：65行JS代码实现的Flappy Bird

HTML5的确可以制作出非常绚丽的网页动画效果，尤其是利用HTML5 Canvas特性和HTML5 3D特性，我们更加可以欣赏到超酷的动画特效。 

1、HTML5版Flappy Bird游戏，仅65行Javascript代码  

Flappy Bird相信大家都很熟悉了，2014年最热门的手机游戏之一。Flappy Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发，形式简易但难度极高的休闲游戏，很容易让人上瘾。今天我们用HTML5来重写这款Flappy Bird游戏，值得注意的是，利用Phaser框架，只需65行Javascript代码即可实现HTML5版的Flappy Bird游戏。按空格键控制小鸟，试试看吧。 

在线演示   /   源码下载  

2、3D HTML5 Logo动画，HTML5多视角3D旋转动画  

今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的，该动画实现了HTML5 Logo旋转的效果。 

在线演示   /   源码下载  

3、HTML5 WebGL水面水波荡漾特效，可多视角展示  

今天向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。 

在线演示   /   源码下载  

4、HTML5版切水果游戏，HTML5游戏极品  

这是一款由百度JS小组提供的HTML5版切水果游戏，虽然和原版的切水果游戏相比功能不怎么完善，但是该HTML5切水果游戏也算有声有色，画面也十分华丽。 

在线演示   /   源码下载  

5、CSS3 飘带菜单，超酷3D CSS3菜单  

今天要分享的这款CSS3菜单非常特别，菜单是呈飘带状的，鼠标滑过菜单项时，菜单项会凸显出来，表现的非常立体动感。 

在线演示   /   源码下载  

6、HTML5跳伞游戏，看谁先安全降落地面  

这是一款非常不错的HTML5休闲小游戏，主要应用了HTML5的重力感应效果。游戏一共四个玩家，主要是比谁先安全降落地面，绿色信号灯亮时，按下“X”键开始降落，然后再按“X”键打开降落伞进行安全降落，你需要控制好时机来按下“X”键和对手们比谁先安全降落。大家也可以在下面下载源代码学习分享。 

在线演示   /   源码下载  

7、HTML5视频播放器Video.Js，播放器外观可自定义  

以前我们都是使用flash来制作视频播放器，现在HTML5逐渐发展起来了，我们也可以利用HTML5来制作播放器。今天给大家介绍一款HTML5播放器Video.Js，改HTML5视频播放器可以自己定义外观，包括整体颜色，播放按钮定制等功能。总体来说，Video.Js是一款很不错的视频播放器。 

在线演示   /   源码下载  

8、HTML5树叶飘落动画，HTML5动画经典  

今天来分享一款HTML5树叶飘落动画，这款HTML5树叶飘落动画是基于webkit内核的，所以需要webkit内核的浏览器才能播放该动画，效果真的非常酷。 

在线演示   /   源码下载  

以上就是8款令人惊叹的HTML5 Canvas动画特效，欢迎收藏分享。本文由 html5tricks 收集整理，转载请务必保留原文链接。