阅读更多

8顶
0踩

Web前端

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

2014-06-18 09:33 by 见习编辑 html5_dev 评论(7) 有11396人浏览
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方法

    定义和用法 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的宽

  • 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'弹..

  • js弹窗&返回值

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

  • 打开新窗口(window.open) 用法

    窗口名称:可选参数,被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_selft"具有特殊意义的名称。 _blank:在新窗口显示目标网页 _self:在当前窗口显示目标网页 _top:框架网页中在上部窗口中显示目标网页 3.相同 name 的窗口只能创建一个,要想创建...

  • 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参数详解

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

  • Window的Open方法,弹窗的特征【超详细篇】

    本篇文章主要介绍在在JavaScript中window的OPen方法,弹窗的特征以及部分理论知识 在JavaScript中,window是一个全局对象,表示当前浏览器窗口或标签页。它包含了浏览器提供的许多方法和属性,用于操作窗口、文档和浏览器环境。可以通过window对象来访问和操作浏览器窗口的属性和方法,例如等。此外,window对象也是全局作用域的顶层对象,因此全局定义的变量和函数实际上成为了window对象的属性和方法。方法/属性描述弹出警告框,显示指定的消息弹出确认框,显示指定的消息

Global site tag (gtag.js) - Google Analytics