阅读更多

8顶
0踩

Web前端

原创新闻 10 款很酷的 HTML5 动画应用

2014-06-18 09:33 by 见习编辑 html5_dev 评论(7) 有11340人浏览
10款很酷的HTML5动画和实用应用,这里有菜单、SVG动画、Loading动画,总有你喜欢的,而且,每一款HTML5应用都提供源代码下载,方便大家学习和研究,一起来看看吧。

1、HTML5 SVG 树枝分叉动画特效

今天我们来分享一款基于HTML5和SVG的动画效果,它是一个可以自动分叉的树,动画将以二叉树的形式展开。这三颗SVG树先是用svg的g画笔来定义这些树枝,然后利用javascript来实现动态改变g从而实现树枝的分叉展开动画。



在线演示  /  源码下载

2、HTML5/CSS3 3D下拉折叠菜单

之前我们介绍过很多CSS3菜单了,效果都十分华丽炫酷,但是这些CSS3菜单基本都是二维平面菜单,今天要分享的这款HTML5/CSS3菜单却是3D的效果。菜单展现时出现折叠下拉的动画特效,菜单也可以收起,鼠标滑过菜单项的效果也很不错。



在线演示  /  源码下载

3、HTML5/CSS3扇形进度条动画,可渐变颜色

今天我们要来分享一款很特别的CSS3进度条动画,它是一个半个圆的扇形,同时,随着进度的增加,进度条的背景颜色会逐渐变化,最后完成的时候变成绿色,效果非常不错。



在线演示  /  源码下载

4、HTML5 Canvas烟花特效,场景十分华丽

对于HTML5技术来说,Canvas应用非常广泛,基本上所有HTML5动画特效都会用到Canvas特性。今天我们要分享一款基于HTML5 Canvas实现的烟花特效,我们只需在黑色的画布上点击鼠标,即会有漂亮的烟花绽放在夜空当中。



在线演示  /  源码下载

5、CSS3 Loading加载动画,小球循环转圈

今天我们要来看一款非常动感的CSS3 Loading加载动画特效,它和其他的Loading动画不一样,它并没有十分规则的圆圈动画,而是不规则的转圈,有5个小球互相撞击转圈来实现这款Loading动画特效。



在线演示  /  源码下载

6、jQuery模拟键盘事件,可对应键盘每一个键

这是一款基于jQuery的模拟键盘事件的应用,键盘上除了功能键,其他键都可以用这款插件来模拟。当你敲击键盘上的键时,这款应用会帮助你获取到这个键的事件,并在页面上的模拟键盘中以动画的形式展现出来,相当实用。



在线演示  /  源码下载

7、HTML5 3D弹簧线圈动画特效

这是一款基于HTML5的3D动画特效,它是一个线圈弹簧,并且可以像波浪一样运动,就像真实的弹簧一样,每一圈的弹簧都会跟随上一圈的运动而运动,非常逼真。



在线演示  /  源码下载

8、CSS3 3D 苹果笔记本动画

这又是一款超酷的CSS3 3D动画效果,它是一款带有3D视觉效果,并且可以360度旋转的macbook air。这款CSS3 3D动画的笔记本底部有一个逼真的投影,可以跟随图片一起转动,从而凸显其3D效果,是一款很不错的CSS3 3D动画特效。



在线演示  /  源码下载

9、CSS3 3D立方体动画,表面颜色可渐变

这是一款很酷的CSS3 3D立方体动画,和之前分享的立方体动画不同的是,这款CSS3立方体动画的几个表面的背景颜色都有渐变的动画效果,伴随着立方体的旋转,这款CSS3 3D动画显得更加炫酷迷人,效果非常不错。



在线演示  /  源码下载

10、jQuery/CSS3相册浏览插件,相册图片滤镜效果

这是一款基于jQuery和CSS3的超酷相册浏览插件,当我们滑过相册图片的缩略图时,图片即会产生滤镜效果,由灰色编程彩色,同时图片周围产生不错的阴影效果。点击缩略图时,我们将开始浏览相册的原始图片,我们点击右上角的关闭按钮即可回到相册缩略图模式。



在线演示  /  源码下载

  • 大小: 25.6 KB
  • 大小: 26.3 KB
  • 大小: 8 KB
  • 大小: 26.3 KB
  • 大小: 6.6 KB
  • 大小: 23.1 KB
  • 大小: 15.5 KB
  • 大小: 6.3 KB
  • 大小: 17 KB
  • 大小: 70.1 KB
8
0
评论 共 7 条 请登录后发表评论
7 楼 补魔党 2014-11-04 13:53
最后一个图片都不能关闭
6 楼 小小与大大 2014-09-03 19:04
mark.
5 楼 huoquan 2014-08-21 13:44
觉得组件这个好点这里
4 楼 mistake 2014-08-04 16:23
mark           
3 楼 yujiain2008 2014-06-24 15:38
mark1
2 楼 abun 2014-06-20 23:59
真是漂亮。
1 楼 chenjianhuacool 2014-06-18 17:32
太棒了。下载学习学习。谢谢分享。
---------
My Blog:http://blog.mn886.net/chenjianhua

发表评论

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

相关推荐

  • JavaScript 中的 Window.open() 用法详解

    本文介绍了如何使用Window.open()方法,列举了该方法中各个参数的含义,以及如何在当前窗口、新窗口、独立窗口打开地址

  • window.open()详解

    window对象用法:1. open方法  语法格式:window.open(URL,窗口名称,窗口风格)  功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。  说明:open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL地址;open方法在打开一个新的浏览器窗口时,还可以指定窗口的名称(第二个参数);open方法在打开一个新的浏览器窗口时,还可以指定窗口的风格(第三...

  • window.open详解(打开新窗口、脱离当前浏览器窗口打开新窗口)

    语法 window.open(URL,name,features,replace) 参数 描述 URL 字符串(可选),新窗口中要显示的地址 name 字符串(可选),打开窗口的方式,类似a标签tartget属性:_blank,_parent,_self,_top features 字符串(可选),申明新窗口的显示特征,见下表 replace 布尔值(可选),true - URL 替换浏览历史中的当前条目;false - URL 在浏览历史中创建新的条目 窗口特征(Feat

  • JS 中的 Window.open() 用法详解

    方法是 JavaScript 中的一个内置方法,用于在浏览器中打开一个新的窗口或标签页。需要注意的是,由于弹出窗口的滥用已经成为了一个安全问题,现代浏览器通常会默认阻止 window.open() 方法的调用,除非是在用户的交互下触发的。因此,在实际的开发中,我们需要谨慎使用这个方法,避免被浏览器误认为是恶意行为。

  • window.open()打开窗口的几种方式

    window.open()的三个参数 例如: window.open("要跳转的网址", "跳转形式或者名字", "给出窗口添加新的的属性(字符串形式)"); window.open("###", "_blank","height=600, width=600, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"); 1. 在当前窗口打开百度,并且使URL地址出现在搜索

  • window.open和vue router新开页面

    打开新页面,并实现在新开页面中携带参数,可以使用 URLSearchParams 对象,进行参数的拼接和解析,vue router跳转新页面和window.open都可以,三种方式适应于不同场景。以上是几种常在开发中使用的几种跳转和新开页面的方式,关于router,在后续里更深入学习。

  • Window.Open详解

    原文地址:Window.Open详解 一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔

  • window.open()各参数详解

    【代码】window.open()各参数详解。

  • JS窗口问题处理:使弹出窗口保持前端显示的几种方法,及window窗体对象open()和showModalDialog()用法...

    用window.open打开一个窗口,怎么使它一直在父窗口的上面,除非点击自己设置的关闭按钮,我试了一下onblur="self.focus"好像不管用. 可使用: opened=window.open("demo.html","demo","left=80,top=60,width=640,height=480,help:no,resizable:no"); opened.focus(...

  • Window open方法

    定义和用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 语法 window.open(*URL,name,specs,replace*) 参数 说明 URL 可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口 name 可选。指定target属性或窗口的名称。支持以下值:_blank - URL加载到一个新的窗口。这是默认_parent - URL加载到父框架_self - URL替换当前页面_top - URL替换任何可加载的框架集nam

  • window.open

      window.open ("page.html", "newwindow", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300")  height:page.html的高度  width:page.html的宽

  • js弹窗&返回值

    版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan Window.open是ff和ie下都通用的弹窗方法. 似乎有些版本windows下ie的window.open打开的速度很慢. 第二个参数就是打开页的名字为空或者为_bla...

  • window.open 详解

    1. 最基本的弹出窗口代码 window.open('page.html'); 2. 经过设置后的弹出窗口 window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'); 参数解释 window.open弹出新窗口的命令; 'page.html'弹..

  • window.open常用参数具体意义

    1.页面window.open命令window.open (URL,name,specs,replace);注: 参数名称 属性值 备注 URL 页面的URL 无 name 1)_blank - URL加载到一个新的窗口。这是默认 2)_parent - URL加载到父框架 3)_self - URL替换当前页面 4)_top - URL替换任何可加载的框架集 5)n

  • window.open使用方法以及参数说明

    window.open使用方法以及参数说明window.open参数window.open方法window.open使用一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法: window.open(pageURL,name,parameters) 其中:     pageURL 为子窗口路径     na

  • Javascript跳转页面和打开新窗口等方法

    javascript方法(打开新页面):function OpenWin(theUrl){ window.open(theUrl,,menubar=no, z-look=yes, scrollbars=no, toolbar=no, status=yes, resizable=no, width=400, height=300);}function OpenWin(

  • window.open()参数详解

    1、window.open方法有三个参数: window.open(url, [name], [configuration]) 其中: url:为要新打开页面的url name:为新打开窗口的名字,可以通过此名字获取该窗口对象 configuration:为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息 例子: 新打开一个没有菜单栏、标题栏、工具栏,但是有滚动条、状态栏、地址栏...

Global site tag (gtag.js) - Google Analytics