阅读更多

23顶
0踩

Web前端
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收集整理,转载请务必保留原文链接。
  • 大小: 23.7 KB
  • 大小: 52.3 KB
  • 大小: 54 KB
  • 大小: 66.2 KB
  • 大小: 27.6 KB
  • 大小: 44.1 KB
  • 大小: 48.5 KB
  • 大小: 41.2 KB
来自: html5tricks
23
0
评论 共 10 条 请登录后发表评论
10 楼 Yangushan 2014-05-06 10:01
mark啊
9 楼 main_xtgjfge 2014-05-06 09:14
尼玛,都是大神,感觉自己落伍了
8 楼 wade200 2014-03-19 09:42
咋这样牛 
7 楼 mayufenga1 2014-03-19 09:17
好像很厉害的yangzi
6 楼 kuchaguangjie 2014-03-14 12:16
不过还是很叼 ...
5 楼 kuchaguangjie 2014-03-14 12:14
html5 动画 就是 cpu 消耗 太厉害了,
另外那不是 60行, 后面有个很大的类库 ...
4 楼 chendy1986 2014-03-13 22:32
为什么不是所有浏览器都支持html5,为什么ie6还存在
3 楼 文仁126520 2014-03-13 16:54
大神啊!
2 楼 tjj006 2014-03-13 15:06
无敌了啊!
1 楼 sxwgf001 2014-03-13 12:26
犀利

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 幻彩博客(v12.3.1 水墨冰蓝作品).zip

    不能让他们他欺负人了,所以利用自己现有的技术开发一个仿QQ空间的博客,我要没费,要开源,要把我的劳动成果分享给大家,做人不能只看钱,由于本人技术有限只能开发一个个人版简单的博客,我非常想有人给我指点一下...

  • 阿里秋招笔试题——求冰田区域

    将一个区域,分成 m×n 个块,若某一个块有冰则用 * 表示,无冰则用 0 表示,任给一个这样的区域,求冰田区域(冰田区域划分规则:如果两个小块之间能够在不穿越其他块的情况下连成直线,则**属于同一冰田区块)个数...

  • 冰蝎PHP码流量还原

    之前打3ctf的时候看见了一道冰蝎流量还原的misc,之后觉得还挺有意思的,毕竟之前网站被种过马 ,弄出来之后搞个工具结合全流量设备或者wireshark的包来还原攻击者到底做了哪些动作,故有了此文。 0x02环境准备 ...

  • 改造冰蝎对抗waf&OpenRASP计划-初探

    0x01 前言在参考了各家waf对于多种姿势检测“冰蝎”的文章之后,产生了改造冰蝎的想法,目前主要的检测手段为针对冰蝎的流量特征进行匹配,所以我们的反侦探手段为改变冰蝎的流量特征以达...

  • 2016物联网大趋势搞不懂?别担心,CES为你指点迷津

    从CES上物联网设备的大规模展出不难看出,2016年注定会是物联网技术和产品腾飞的一年,不论是智能家居、可穿戴设备还是车联网,都将出现令人耳目一新的改变。安全性作为物联网亟需解决的首要问题已经被越来越多的...

  • c#操作数据库,试着封装成类 - 求误入指点.

    心若静冰 " , " 100 " }; MySqlDbType[] vtype = { MySqlDbType.VarChar, MySqlDbType.VarChar, MySqlDbType.VarChar, MySqlDbType.VarChar, MySqlDbType.Int32 }; int [] vsize = { 128 , 128 , 128 , 128 , 10 }...

  • 【方案】0519冰箱运行监测系统:方案分析

    公众号关注“DLGG创客DIY”设为“星标”,重磅干货,第一时间送达。最近向一些大牛请教,(大牛们)给出了很多建议,当然也指出了很多问题,从中也发现了很多欠思考欠推敲的地方,讲...

  • 嵌入式小趴菜的入行历程(您看见了就指点一二)

    嵌入式是一种专用的计算机系统,通常我们叫做嵌入式系统,是一种控制,管理,或者辅助操作机器和设备的一种装置。简单来说就是机器,电子设备的大脑。

  • 【进展】冰箱运行监测系统:进展汇报,顺理思路

    改名字:冰箱运行监测系统需求分析:【S操作】冰箱正常运行监控系统需求整理 进展及思路: 低功耗方案:ESP32,主要考虑成本和功能(wifi和蓝牙),询问过大牛“大...

  • 溜冰

    一晚上就见她当老师在指点我们几个,总算是小有进步. 小朱带了女朋友和另一个女性朋友来,那个女性朋友说是介绍给小姚.后来我们就放他们两个独自玩去了. 在场里,有一个小姑娘溜的特别顺畅,特别好看,真是羡慕....

  • 冰姑娘

    不过这小家伙现在似乎起了一个很大的变化,而这变化似乎是在冰罅里,在那个寒冷的、奇异的冰世界里形成的——根据瑞士农民的说法,这个冰世界里关着许多恶人的灵魂,而且这些灵魂直到世界的末日也不会得到释放。...

  • 砸冰箱维权是“公益秀”

    按照律师指点的那样,气势汹汹的要求中年接待男,“少啰嗦,给我拿一份表 格(我忘了是叫民事诉讼立案表还是什么)来!”接待男根据这个年轻人的狰狞嘴脸,看出他已经成了一个诉讼常识方面的暴发户,于是乖乖地摸出...

  • 幻彩博客(v2012.2.3 群用户升级版 水墨冰蓝作品).zip

    不能让他们他欺负人了,所以利用自己现有的技术开发一个仿QQ空间的博客,我要没费,要开源,要把我的劳动成果分享给大家,做人不能只看钱,由于本人技术有限只能开发一个个人版简单的博客,我非常想有人给我指点一下...

  • 《经 典 文 章 大 赏》

    《经 典 文 章 大 赏》 1.老师普通话说的不好,有一回老师听写,我坐第一排专注的听着老师发音。老师读:“嫌犯”,我立刻在笔记本写上“咸饭”。老师不小心瞄到我的笔记本,但又不忍让我难堪,就提高音量:“嫌疑犯”...

  • 冰雪电线检测研究

    冰雪电线的检测意义在于,检测出电线的带冰宽度,并更具几何知识计算出冰块体积,最终计算出冰块重量,用以判断此冰块厚度是否超过警戒值。由于研究中以图像为研究对象,对设备要求不要(不像其他检测设备复杂,只需...

  • 小时候看过一部漫画,忘记名字了。。。

    在上学的时候,记得看了一部漫画,小本的那种,和七龙珠一样大的,只记得内容情节,但是没办法记住漫画的名字,所以好久了,都没有找到相应的漫画,所以,将剧情书写出来,希望知道名字的小伙伴,能够将名称分享给我...

  • 冰晶画技术志在何方

    项目截止目前已推广两年之久,市场火爆程度一如既往,其成功之处绝不仅仅只是研究一下项目起源地、研发背景、推广目的就能说明白的,鄙人之言仅作抛砖引玉之用,希望各位大师能指点迷津。  

  • 简单的一个三级联动,望朋友们多多指点

    ["人字拖","大拖鞋"] ] ]; function init() { var select1 = document.getElementById("first"); var select2 = document.getElementById("second"); var select3=document.getElementById...

  • 后海溜冰

     我们中午到了后海, 第一眼看见湖上结了冰,看到很多人已经在冰上玩,非常兴奋。 看到老年人也在玩,他们坐在冰车上后面有人在推着, 有些是两个人一个冰车,甚至是三个人一块直排坐得也有。 后海一大片的都结了...

  • 沈阳:赏花灯 玩冰雪 逛庙会

    衣:敦煌每年在12月到来年2月为最冷(曾有历史最低的摄氏零下28度),晴天时约摄氏零下15度到零上5度之间,早晚温差很大。常年降水少,日照强烈,蓝天白云。千万注意,野外风大,帽子手套一定要有,不然冻出鼻涕别怨...

Global site tag (gtag.js) - Google Analytics