10 款很酷的 HTML5 动画应用

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

图片 1

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

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的超酷相册浏览插件,当我们滑过相册图片的缩略图时,图片即会产生滤镜效果,由灰色编程彩色,同时图片周围产生不错的阴影效果。点击缩略图时,我们将开始浏览相册的原始图片,我们点击右上角的关闭按钮即可回到相册缩略图模式。在线演示
/ 源码下载

1、HTML5 Canvas实现画板涂鸦动画应用

这是一款HTML5网络画板,拥有基础的图形绘制功能,相对比较简单,基于canvas,因此非常灵活。

图片 2

在线演示源码下载

2、HTML5堆木头游戏

这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

图片 3

在线演示源码下载

3、HTML5 3D立方体图片切换动画

这款HTML5动画可以将图片切分成几个立方体,带有3D的立体效果。

图片 4

在线演示源码下载

4、100多个纯CSS3动画图标

这里总共有100多个纯CSS3实现的动画图标,找找看,总有一个适合你。

图片 5

在线演示源码下载

5、HTML5/CSS3动画相册

这款HTML5相册的特点是我们可以将照片随意放置在桌面上,图片可以任意倾斜,看上去很自然。

图片 6

在线演示源码下载

6、HTML5 Canvas模拟衣服撕扯动画

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

图片 7

在线演示源码下载

7、jQuery/CSS3带Tooltip的滑杆动画

这是一个带有Tooltip提示框的滑杆,基于jQuery和CSS3,外观样式非常不错。

图片 8

在线演示源码下载

8、5个可爱的CSS3 Loading加载动画

这是一款可爱的CSS3
Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

图片 9

在线演示源码下载

以上8款不错的HTML5动画应用希望你会喜欢,也可以下载源码来研究。

发表评论

电子邮件地址不会被公开。 必填项已用*标注