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. MySQL 5.7 安装完成后,首次登陆的几个问题

    Server:CentOS 7.0 MySQL : 5.7.20 MySQL Community Server (GPL) 1.首次登陆后修改密码: 根据安装时的选择不同,有mysqld_safe用m ...

  2. BZOJ4029 HEOI2015定价

    贪心. 每次将最后一个非零位加一判断即可. 一开始想少了,只关心把最后一位变成5了,其实可以都变的. #include<bits/stdc++.h> using namespace std ...

  3. l1和l2正则化的区别 - 面试错题集

    L0:计算非零个数,用于产生稀疏性,但是在实际研究中很少用,因为L0范数很难优化求解,是一个NP-hard问题,因此更多情况下我们是使用L1范数L1:计算绝对值之和,用以产生稀疏性,因为它是L0范式的 ...

  4. ruby -- 修改rubymine的字体大小

     rubymine编辑器默认的字体特别小,如何修改rubymine当中的字体大小?  首先,进入 setting\ide setting\editor\colors&fonts\font    ...

  5. 1036: [ZJOI2008]树的统计Count (树链剖分)

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3401  Solved: 1418[Submit] ...

  6. Android SDK最小需求

    As a minimum when setting up the Android SDK, you should download the latest tools and Android platf ...

  7. 关于jQuery中的 offset() 和 position() 的用法

    ---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...

  8. 面试题1:如何实现C++单例模式?

    1. 软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径.设计模式中运用了面向对象编程语言的重要特性:封装.继承.多态.真正领悟设计模式的精髓是可能一个漫长的过程,需要大量实践经验的积 ...

  9. MYSQL GDB SHELL

    http://blog.163.com/xychenbaihu@yeah/blog/static/132229655201141165216974/

  10. [c#基础]使用抽象工厂实现三层

    引言 昨天加了一天班,今天闲来无事,就在想如何将之前的三层和最近一直在学的设计模式给联系在一起,然后就动手弄了个下面的小demo. 项目结构 项目各个层实现 Wolfy.Model层中有一个抽象类Ba ...