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. 【2-SAT】The Ministers’ Major Mess UVALive – 4452

    题目链接:https://cn.vjudge.net/contest/209474#problem/C 题目大意: 一共有m个提案,n个政客,每个政客都会对一些提案(最多四个)提出自己的意见——通过或 ...

  2. hdu 1114 dp动规 Piggy-Bank

    Piggy-Bank Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  3. FastReport.Net使用:[8]交叉表一

    1.绘制报表标题,交叉表可以直接放在标题栏内. 2.拖动一交叉表控件到标题栏内. 3.设置交叉表的行列信息. 将Tabel中的[科室名称]列拖到交叉表的列上以创建列,将Tabel中的[姓名]列拖到交叉 ...

  4. 【LYOI 212】「雅礼集训 2017 Day8」价(二分匹配+最大权闭合子图)

    「雅礼集训 2017 Day8」价 内存限制: 512 MiB时间限制: 1000 ms 输入文件: z.in输出文件: z.out   [分析] 蛤?一开始看错题了,但是也没有改,因为不会做. 一开 ...

  5. 【BZOJ 3809】 3809: Gty的二逼妹子序列 (莫队+分块)

    3809: Gty的二逼妹子序列 Time Limit: 80 Sec  Memory Limit: 28 MBSubmit: 1728  Solved: 513 Description Autumn ...

  6. Linux下对拍脚本

    使用说明:        1. 被测代码.正确代码.生成器代码均使用文件输入输出: 2. 对拍前会清屏,请注意:        3. 输出文件的文件名请和代码文件名保持一致:        4. 若无 ...

  7. 【计算几何】【二分图判定】Gym - 101485C - Cleaning Pipes

    题意:有n个水井,每个水井发出一些管线(都是线段),然后每条管线上最多只有一个水井.所有从不同的水井发出的管线的相交点都是清洁点(不存在清洁点是大于两条管线点的交点).你需要在某些管线上放出一些机器人 ...

  8. App图标生成器的实现,附源码

    背景 网上各种生成app图标的网站和工具,感觉还是用自己写的心里畅快点,所以花了1个小时自己写了个.按照网上给的图标尺寸规范把所有尺寸的都生成了. 建了一个讨论群,533838427.很明显是针对独立 ...

  9. c# -- Form1_Load()不被执行的三个解决方法

    我的第一个c#练习程序,果然又出现问题了...在Form1_Load() not work.估计我的人品又出现问题了. 下面实现的功能很简单,就是声明一个label1然后,把它初始化赋值为hello, ...

  10. zoj 1610 Count the Colors 线段树区间更新/暴力

    Count the Colors Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/show ...