HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSSJavaScript在内的一套技术组合。今天我们推荐8款使用HTML5生成的特殊效果,希望可以对大家的使用带来帮助!

HTML5实现的五子棋游戏

在线演示

这是一款使用HTML5实现的五子棋特效,与计算机的对局你不见得能次次都赢得胜利,不信可以点击在线演示。

一款不需要视频文件的视频播放器-Frame player

在线演示

HTML5视频是非常棒的,它可以很容易的用在多款设备上。但是它也有自己的问题,比如移动设备的播放器,可能有不同版本不兼容的情况。今天我们介绍这款视频播放器完善了之前的效果,用起来更方便。希望大家喜欢!

3D菜单

在线演示

或许在现如今这个科技发达的时代,在线点餐已不是新鲜事。餐厅可以对Menu进行设计,点击菜名会相应弹出菜品的照片,或者还可以增加卡路里,原材料和客户们的评价等。绝对是一个超时髦的创意!

用HTML5的画布实现撕布的动画效果

在线演示

HTML5的画布实现撕布的效果,滑动鼠标,布会随着鼠标变动。点击鼠标左键,然后滑动鼠标,布就会被割开。如果你还没有查看过这款演示效果,那绝对逼真的让你震撼!

HTML5 Canvas(画布) 基础使用和介绍

在线下载

还记得在过去的Web前端开发中,如果你需要绘图或者生成相关图形的话,使用Flash可能是你唯一或者说最强大的实现方式,而在近些年的技术热点HTML5标准中,HTML Canvas(画布)能够更加方便的帮助你实现2D绘制图形图像及其各种动画效果功能。在今天的这篇技术教程中我们将介绍基本的Canvas使用,希望大家觉得有帮助!

HTML5画布生成的2D光源效果

在线演示

超金属的背景,仿佛探照灯的经过让他看上去更加的立体。这是一款使用HTML5 Canvas生成的2D光源效果。绝对让你不后悔使用它!

HTML5的Flappy bird实现

在线演示

著名的Flappy Bird,相信知道的人一定不少吧,点击你的空格,不要让它掉下来,看看你最终的成绩有多好。发上来我们切磋一下吧.

Sonic - 循环加载的利器

在线演示1     在线演示2     在线演示3

Sonic是一个不到3k,非常小的JS类库,你可以用这个类库来创建自定义的加载动画。它的循环动画效果非常赞,比如你可以用它做一条不断追逐自己尾巴 的蛇,这样的动画。Sonic使用了HTML5的canvas元素和其相关API。它基于在一定小的时间间隔上,基于预定义的路径,画出下一个形状,从而 完成动画效果。你可以使用arc,bezier,或line的方法来定义路径。

本周推荐的8款HTML5生成的特效,希望对大家有所帮助!欢迎加入极客标签,我们期待你的分享!

原文来自:推荐8款HTML5相关的特殊效果

推荐8款HTML5相关的特殊效果的更多相关文章

  1. 推荐六款炫酷的HTML5效果插件

    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...

  2. 绝对震撼 7款HTML5动画应用及源码

    1.HTML5 Canvas模拟衣服撕扯动画 超级逼真 今天又要来推荐一款HTML5 Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真.刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当 ...

  3. 推荐25款实用的 HTML5 前端框架和开发工具【下篇】

    快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. ...

  4. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  5. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  6. 推荐10款非常优秀的 HTML5 开发工具

      HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式.今天这篇文章向大家推荐10款 ...

  7. 推荐十款非常优秀的 HTML5 在线设计工具

    网络有很多优秀的设计和开发工具可能大家都不知道,因此这篇文章就向设计师推荐十款优秀 HTML5 在线工具,这些工具能够帮助设计师们设计出更有创意的作品.随着 HTML5 技术的不断成熟,网络上涌现出越 ...

  8. html5编写软件哪个好?八款html5编写软件推荐

    随着各大浏览器对HTML5技术支持的不断完善,未来HTML5必将改变我们创建Web应用程序的方式.而很多html5的初学者都想找一款好用的编写软件,这里主机吧就给大家推荐七款好用的html5编写软件. ...

  9. ( 转 )超级惊艳 10款HTML5动画特效推荐

    今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些HTML5动画和jQu ...

随机推荐

  1. 【Java学习】调用ByteBuffer.getInt()方法得到808464432

    调用ByteBuffer.getInt()方法遇到的奇怪错误 最近在参加阿里的中间件比赛,中间用到了RocketMQ的思想,并且主要集中在使用NIO来读写文件.其中遇到了一个很蛋疼的问题,想了半天想不 ...

  2. Arduino可穿戴教程之第一个程序——上传运行程序(四)

    Arduino可穿戴教程之第一个程序——上传运行程序(四) 2.4.5  上传程序 现在所有Arduino IDE的设置都完成了,我们就可以将示例程序上传到板子中了.这非常简单,只需要单击如图2.45 ...

  3. Python入门基础知识(1) :locals() 和globals()

    Python有两个内置的函数,locals() 和globals(),它们提供了基于字典的访问局部和全局变量的方式. 首先,是关于名字空间的一个名词解释.是枯燥,但是很重要,所以要耐心些.Python ...

  4. 【BZOJ 2555】 2555: SubString (SAM+LCT)

    2555: SubString Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 2548  Solved: 762 Description 懒得写背景了 ...

  5. 欧拉路小结 JZYZOJ1210 骑马修栅栏

    现在写到欧拉路,理解起来并不算特别困难...吧... 但是非常恶心的是每次都要调试半天,做不到一遍两遍就能ac 每次写程序都对于程序的整体构架没有清晰的思路,想到哪里写到哪里真的是个非常差的习惯[尽管 ...

  6. bzoj 2434 ac自动机

    ac自动机中,如果以trie中的节点为节点,(fail[i],i)为边,可以建立一颗树,该树有如下特点:“节点u是节点v的祖先 当且仅当 u代表的字符串是v代表的字符串的一个后缀”.(u代表的字符串是 ...

  7. bzoj 1625: [Usaco2007 Dec]宝石手镯

    Description 贝茜在珠宝店闲逛时,买到了一个中意的手镯.很自然地,她想从她收集的 N(1 <= N <= 3,402)块宝石中选出最好的那些镶在手镯上.对于第i块宝石,它的重量为 ...

  8. Eclipse打开.class文件

    1.准备材料 jad.exe    下载地址  https://varaneckas.com/jad/,根据系统去选择(就当是废话)  下载下来的是jad158g.win.zip压缩文件,解压后有个j ...

  9. Gridview数据导出excel时身份证号码为科学计数法的解决方法

    if (e.Row.RowType == DataControlRowType.DataRow) { string id = this.GridView1.DataKeys[e.Row.RowInde ...

  10. Java是对象引用按值传递的

    原因:JAVA核心编程1卷7版P116 Employee E1 = new Employee("Alice",...); Employee E2 = new Employee(&q ...