Home > News content

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

via:博客园     time:2014/3/10 14:00:17     readed:1334

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

在线演示 源码下载

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

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

flappy-bird

在线演示 源码下载

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

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

html5-webgl-water-effect

在线演示 源码下载

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

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

html5-fruit-ninja

在线演示 源码下载

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

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

css3-3d-ribbon-menu

在线演示 源码下载

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

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

html5-jumper-game

在线演示 源码下载

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

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

html5-video-js

在线演示 源码下载

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

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

css3-fall-leaves

在线演示 源码下载

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

China IT News APP

Download China IT News APP

Please rate this news

The average score will be displayed after you score.

Post comment

Do not see clearly? Click for a new code.

User comments

Related news