canvas教程

7 个顶级的 HTML5 Canvas 动画赏析

字号+ 作者:H5之家 来源:H5之家 2015-10-15 16:39 我要评论( )

HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑。本文分享7个顶级的HT

2015
10-10

7 个顶级的 HTML5 Canvas 动画赏析

HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑。本文分享7个顶级的HTML5 Canvas 动画,都有非常不错的效果。

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

HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 1

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 2

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 3

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 4

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 5

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 6

在线演示

源码下载

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

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

7 个顶级的 HTML5 Canvas 动画赏析 - 爱七七五八网 - 7

在线演示

源码下载

  • 本文固定链接:
  • 转载请注明: Yang 2015年10月10日 于 爱七七五八网 发表
  • 最后编辑:2015-10-10

    作者:Yang

    梦想有多远,我就要走多远!

    捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

    19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单,这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,也可以进入其下载页面下载菜单源代码。 1.... 阅读更多

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5canvas核心技术图形、动画与游戏开发源码

      html5canvas核心技术图形、动画与游戏开发源码

      2017-05-02 17:42

    • 打印html5中Canvas的方法

      打印html5中Canvas的方法

      2017-05-01 15:03

    • HTML5+Canvas调用手机拍照功能实现图片上传(下)

      HTML5+Canvas调用手机拍照功能实现图片上传(下)

      2017-04-30 17:00

    • 学习慕课网canvas倒计时实例笔记

      学习慕课网canvas倒计时实例笔记

      2017-04-30 14:01

    网友点评
    b