阅读更多

4顶
1踩

Web前端

原创新闻 8 款精彩的 HTML5 效果及源码

2014-03-27 10:10 by 见习编辑 tyygming 评论(0) 有7460人浏览
HTML5是HTML的升级版,HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。今天我们推荐8款使用HTML5生成的特殊效果,希望可以对大家的使用带来帮助!

1.  HTML5实现的五子棋游戏

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



在线演示

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

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



在线演示

3.  3D菜单

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



在线演示

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

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



在线演示

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

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



在线下载

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

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



在线演示

7.  HTML5的Flappy bird实现

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



在线演示

8.  Sonic - 循环加载的利器

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



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

原文来自:推荐8款HTML5相关的特殊效果
  • 大小: 28.3 KB
  • 大小: 44.6 KB
  • 大小: 46.1 KB
  • 大小: 32.5 KB
  • 大小: 23 KB
  • 大小: 15.9 KB
  • 大小: 13.8 KB
  • 大小: 22.6 KB
来自: www.gbtags.com
4
1
评论 共 0 条 请登录后发表评论

发表评论

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

相关推荐

  • 用asp+javascript实现动态数据联动,不刷新

    /////////////by xxrl(孔曰成仁,孟曰取E)/////////////Chinese:蒋健华/////////////email:jjh_115@eyou.com联动,联动,联动。。。。困扰了好多网友的神经,在CSDN-ASP板块中,总是看到网友们大呼救命,救什么?联动!为什么联动这样受到关注,其实用性无可非议,用户也能认可,可是如果数据是大量并相互关联的,那问题就来

  • ASP+JS三级联动下拉菜单[调用数据库数据]

    网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:肯定先要连接数据库了,不用说了数据库结构类别1表名称:a   字段:ID,Name   说明:ID为主键是类别1的ID值,Name为类别1的名称类别2表名称:aa   字段:ID,aID,Name   说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称类别3表名称:aaa   字段:ID

  • javascript与asp变量互传

    javascript与asp变量互传 javascript asp:i="1234567";document.form1.num.value=i;asp javascript:dim aai = "1234567"%>var a;a=;alert(a); 

  • ASP+JAVASCRIPT 的数据库调用方法

    ...var connStr=""Provider=SQLOLEDB; Data Source=localhost; Initial Catalog=jiaojingdb; User ID=sa; Password=123456;"var conn= Server.CreateObject("ADODB.Connection");//定义conn的目的是可以提高效率,以后close(),但

  • 实现无刷新DropDownList联动效果

    在做一个文章添加功能时,想在选择大类后,自动将其所属二级小类显示出来,使用DropDownList的SelectedIndexChanged事件可以很容易实现,但每次选择后页面总要刷新一次,让人感觉很不爽。为实现DropDownList无刷新二级联动,这几天在网上找了些资料,但都无法达到我想要的效果,经过反复调试,现已基本实现了此功能,现将代码附下。一、数据库设计:字段名数据类

  • 使用动态JavaScript实现多级菜单联动时不刷新页面的方法

    问题的提出:如下图所示,需要使用多级菜单输入地址,具体有以下要求:(1)    当选中某一级列表项时才能出现该项对应的下一级列表供用户选择。比如在省级区域选中“湖北省”时,市级区域里边只能出现湖北省的所有市级区域供选择,当省级区域中更换成“湖南省”时,市级区域列表应该马上更新为湖南省的所有市级区域供选择。因此,这三级列表是联动的。(2)    在选择地址的过程中不能刷新页面。刷新页面其实只

  • ASP.NET和Javascript的Json数据交互

    最近需要做一个系统,从DataTable中读取数据转交给JavaScript。DataTable中存放着数据点在地图上的经、纬度和记数值。将这些数据以Json的形式交给页面的JavaScript变量。再由百度地图的JavaScript API获取数据显示在地图上。 技术的关键在于: 将DataTable数据转化为Json; 将以C#语言声名的变量形式存放的Json传递给页面的JavaScript变

  • ASP.NET 2.0 开发无刷新页面

    在已经发布的 ASP.NET2.0 中,无刷新页面开发相关部分同 beta2 有不少改动。而且在越来越多的 Ajax 开发包被开发出来的情况下, ASP.NET2.0 自带的无刷新页面技术没有被很多人了解,甚至不少人认为该功能有些“鸡肋”。但如果我们仅仅是在程序中加入很少部分的 Ajax 特性 、Atlas 、Ajax.Net 等就显得有些“杀鸡用牛刀”的感觉了。而且,我认为使用 ASP.NET2

  • Ajax实现定时刷新,获取后台数据(实现技术ASP)

    参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容. Now(),开始我们的主题:这里我们用Access作为数据库,建个数据库名称为user.mdb和update.html,update.asp放同一目录,再建表 update.html页面,不用解释太多,里面有注释http://www.w3.org/TR/html4/

  • 数据库发生变化实时更新前端页面

    问题来源 应项目需求,当数据库中数据表中数据发生变化时,我需要通过后台把这些消息发送给前端页面,以实现实时更新。这种需求也可以成为前端实时监测后台数据库,网上对这方面的讨论也是五花八门,于是就百度Google,发现大家经常使用下面几种方法: 。。。。待续

  • 无刷新SELECT联动

    http://vision.anyp.com/uveditor/10184-229323.aspx无刷新SELECT联动文章主题标签:SELECT联动DropDownList控件文:邓铭武我们在做开发的过程中,多少都会遇到Select联动的问题。一般来讲,运用ASP.NET自带的DropDownList控件来做,是最方便的。如下:Default.aspx@

  • asp动态级联菜单

    JS脚本:dim rsdim sqldim countdim rs1dim sql1sql = "select * from region order by zoneid asc"set rs = server.createobject("adodb.recordset")rs.open sql,conn,1,3%>var onecount;onecount=0;subcat = new Arra

  • 动态联动select下拉框实现

    我们在做下拉框选择时,常常会遇到一种场景,就是需要两个下拉框,其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化。比如我有大的分类:有氧运动  无氧运动选择有氧运动时,选项有:跑步,游泳选择无氧运动时,选项有:深蹲,卧推本章记录如何实现动态联动select下拉框实现。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录动态联动se

Global site tag (gtag.js) - Google Analytics