分享8款令人惊叹的HTML5 Canvas动画特效
HTML5 的确可以制作出非常绚丽的网页动画效果,尤其是利用 HTML5 Canvas 特性和 HTML5 3D 特性,我们更加可以欣赏到超酷的动画特效。今天我从 html5tricks 网站上整理了 8 款令人惊叹的 HTML5 Canvas 动画教程,大家可以一起来看看。
1、3D HTML5 Logo 动画 HTML5 多视角 3D 旋转动画
HTML5 3D 动画实现起来非常方便,之前介绍过基于 jQuery 的 3D 旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款 HTML5 3D 旋转动画是利用纯 HTML5 技术实现的,该动画实现了 HTML5 Logo 旋转的效果。
2、HTML5 版 Flappy Bird 游戏仅 65 行 Javascript 代码
Flappy Bird 相信大家都很熟悉了,2014 年最热门的手机游戏之一。Flappy Bird 这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾。今天我们用 HTML5 来重写这款 Flappy Bird 游戏,值得注意的是,利用 Phaser 框架,只需 65 行 Javascript 代码即可实现 HTML5 版的 Flappy Bird 游戏。按空格键控制小鸟,试试看吧。
3、HTML5 WebGL 水面水波荡漾特效可多视角展示超逼真
之前已经向各位分享过一款很逼真的 HTML5 水波荡漾特效, 效果还算不错。今天再向大家分享一款更加给力的 HTML5 水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石 头让其在池底滚动,也可以拖动画面多视角观看该 HTML5 水波动画。
4、HTML5 版切水果游戏 HTML5 游戏极品
这是一款由百度 JS 小组提供的 HTML5 版切水果游戏,记得切水果游戏当年非常火,今天我找到了一款基于 HTML5 实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善,但是该 HTML5 切水果游戏也算有声有色,画面也十分华丽。
5、CSS3 飘带菜单超酷 3D CSS3 菜单
之前我们分享过不少漂亮的 CSS3 菜单,CSS3/jQuery 创意盒子动画菜单、CSS3 垂直菜单菜单有立体动画视觉、CSS3 多级下拉菜单弹性展开下拉动画。今天要分享的这款 CSS3 菜单非常特别,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会凸显出来,表现的非常立体动感。
6、HTML5 跳伞游戏看谁先安全降落地面
今天我再来分享一款有趣的 HTML5 游戏,HTML5 跳伞游戏,是一款非常不错的 HTML5 休闲小游戏,主要应用了 HTML5 的重力感应效果。游戏一共四个玩家,主要是比谁先安全降落地面,绿色信号灯亮时,按下“X”键开始降落,然后再按“X”键打开降落伞进行安全降落,你需要 控制好时机来按下“X”键和对手们比谁先安全降落。大家也可以在下面下载源代码学习分享。
7、HTML5 视频播放器 Video.Js 播放器外观可自定义
以前我们都是使用 flash 来制作视频播放器,现在 HTML5 逐渐发展起来了,我们也可以利用 HTML5 来制作播放器。今天给大家介绍一款 HTML5 播放器 Video.Js,改 HTML5 视频播放器可以自己定义外观,包括整体颜色,播放按钮定制等功能。总体来说,Video.Js 是一款很不错的视频播放器。
8、HTML5 树叶飘落动画 HTML5 动画经典
之前我们分享几款经典的 HTML5 动画:HTML5 爱心表白动画、HTML5 视频破碎重组特效、HTML5 像素粉碎图片动画。今天再来分享一款 HTML5 树叶飘落动画,这款 HTML5 树叶飘落动画是基于 webkit 内核的,所以需要 webkit 内核的浏览器才能播放该动画,效果真的非常酷。
以上就是 8 款令人惊叹的 HTML5 Canvas 动画特效,欢迎收藏分享。