分享8款令人惊叹的HTML5 Canvas动画特效

我不是女神ヾ 2022-05-26 09:17 219阅读 0赞

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][]][3d-html5-logo-animation 1] [在线演示][3d-html5-logo-animation 1] / [源码下载][Link 1]

## 2、HTML5版Flappy Bird游戏 仅65行Javascript代码 ##

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

[![flappy-bird][]][flappy-bird 1] [在线演示][flappy-bird 1] / [源码下载][Link 2]

## 3、HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真 ##

之前已经向各位分享过一款很逼真的[HTML5水波荡漾特效][HTML5]，效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。

[![html5-webgl-water-effect][]][html5-webgl-water-effect 1] [在线演示][html5-webgl-water-effect 1] / [源码下载][Link 3]

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

这是一款由百度JS小组提供的HTML5版切水果游戏，记得切水果游戏当年非常火，今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善，但是该HTML5切水果游戏也算有声有色，画面也十分华丽。

[![html5-fruit-ninja][]][html5-fruit-ninja 1] [在线演示][html5-fruit-ninja 1] / [源码下载][Link 4]

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

之前我们分享过不少漂亮的CSS3菜单，[CSS3/jQuery创意盒子动画菜单][CSS3_jQuery]、[CSS3垂直菜单 菜单有立体动画视觉][CSS3_]、[CSS3多级下拉菜单 弹性展开下拉动画][CSS3_ 1]。今天要分享的这款CSS3菜单非常特别，菜单是呈飘带状的，鼠标滑过菜单项时，菜单项会凸显出来，表现的非常立体动感。

[![css3-3d-ribbon-menu][]][css3-3d-ribbon-menu 1] [在线演示][css3-3d-ribbon-menu 1] / [源码下载][Link 5]

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

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

[![html5-jumper-game][]][html5-jumper-game 1] [在线演示][html5-jumper-game 1] / [源码下载][Link 6]

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

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

[![html5-video-js][]][html5-video-js 1] [在线演示][html5-video-js 1] / [源码下载][Link 7]

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

之前我们分享几款经典的HTML5动画：[HTML5爱心表白动画][HTML5 1]、[HTML5视频破碎重组特效][HTML5 2]、[HTML5像素粉碎图片动画][HTML5 3]。今天再来分享一款HTML5树叶飘落动画，这款HTML5树叶飘落动画是基于webkit内核的，所以需要webkit内核的浏览器才能播放该动画，效果真的非常酷。

[![css3-fall-leaves][]][css3-fall-leaves 1] [在线演示][css3-fall-leaves 1] / [源码下载][Link 8]

以上就是8款令人惊叹的HTML5 Canvas动画特效，欢迎收藏分享。

[3d-html5-logo-animation]: /images/20220526/06a5a43c572143b9a7915fc7c9132372.png
[3d-html5-logo-animation 1]: http://www.html5tricks.com/demo/3d-html5-logo/index.html
[Link 1]: http://www.html5tricks.com/3d-html5-logo-animation.html
[flappy-bird]: /images/20220526/6585e3943a6d49779f57580103a51fd8.png
[flappy-bird 1]: http://www.html5tricks.com/demo/flappy-bird/index.html
[Link 2]: http://www.html5tricks.com/html5-flappy-bird.html
[HTML5]: http://www.html5tricks.com/html5-water-ripple.html
[html5-webgl-water-effect]: /images/20220526/101f04fded70408e8bd26a35a64499e6.png
[html5-webgl-water-effect 1]: http://www.html5tricks.com/demo/webgl-water/index.html
[Link 3]: http://www.html5tricks.com/html5-webgl-water-effect.html
[html5-fruit-ninja]: /images/20220526/bc80020521584f79808d424378158b95.png
[html5-fruit-ninja 1]: http://www.html5tricks.com/demo/html5-fruit-ninja/index.html
[Link 4]: http://www.html5tricks.com/html5-fruit-ninja.html
[CSS3_jQuery]: http://www.html5tricks.com/css3-jquery-box-menu.html
[CSS3_]: http://www.html5tricks.com/css3-vertical-menu.html
[CSS3_ 1]: http://www.html5tricks.com/css3-dropdown-menu-animation.html
[css3-3d-ribbon-menu]: /images/20220526/48c83277f62044f6a39190d97ce947d5.png
[css3-3d-ribbon-menu 1]: http://www.html5tricks.com/demo/css3-ribbon-menu-1/index.html
[Link 5]: http://www.html5tricks.com/css3-3d-ribbon-menu.html
[html5-jumper-game]: /images/20220526/ee05104f0c2b41bdb2976250c8af79c4.png
[html5-jumper-game 1]: http://www.html5tricks.com/demo/jumperx/index.html
[Link 6]: http://www.html5tricks.com/html5-jumper-game.html
[html5-video-js]: /images/20220526/d5c3e686206942a997a6f223a4cc7777.png
[html5-video-js 1]: http://www.html5tricks.com/demo/video-js/demo.html
[Link 7]: http://www.html5tricks.com/html5-video-js.html
[HTML5 1]: http://www.html5tricks.com/html5-heart-animation.html
[HTML5 2]: http://www.html5tricks.com/html5-video-crash.html
[HTML5 3]: http://www.html5tricks.com/html5-pixel-image-effect.html
[css3-fall-leaves]: /images/20220526/c0ff48769a844ada87130b12419a1423.png
[css3-fall-leaves 1]: http://www.html5tricks.com/demo/css3-fall-leaves/index.html
[Link 8]: http://www.html5tricks.com/css3-fall-leaves.html