几款很酷的HTML5动画和实用应用

9、

HTML5 WebGL 3D樱花飘落动画

今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画，基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成，而且樱花叶片也会随着不同的角度发出不同的色泽光芒，总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气，如花雨一般，让人倍感震撼。另外，整个动画还可以通过按钮控制开启和暂停。

​编辑

在线演示源码下载

8、

基于Three.js的图片撕碎切换动画

这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画，它是基于three.js动画库实现的，主要动画是图片以撕碎的特效进行切换，相当震撼。另外，在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件，相信会很不错的。

​编辑

在线演示源码下载

7、

HTML5 3D 陨石火球动画

今天要分享的又是一个基于HTML5 Canvas的炫酷动画，这是一个3D的陨石火球动画。从外观上看，这就像一颗正在坠落的陨石火球，还拖着一条长长的火焰尾巴。同时，我们可以通过拖拽鼠标从不同的视角来看这颗火球，并且可以通过鼠标滚轮来放大缩小火球，这便让人产生了不错的3D视觉效果。另外，右上角可以展开一个控制面板，允许你设置火球的颜色、大小、阴影等参数。

​编辑

在线演示源码下载

6、HTML5 3D 神秘游戏场景动画

今天分享的是一个基于Three.js的HTML5 3D动画，这个动画模拟了游戏中的一个炫酷的3D场景，支持360度视角查看，也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果，同时还有路两边的围栏、灯笼、石头，以及星光闪闪的萤火虫，整个画面显得十分神秘。不得不说，threejs作为webgl的上层库，基本可以满足我们动画制作的大部分需求。

​编辑

在线演示源码下载

5、HTML5/CSS3 3D下拉折叠菜单 超炫CSS3菜单动画

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

​编辑

在线演示 / 源码下载

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

今天我们要来看一款非常动感的CSS3 Loading加载动画特效，它和其他的Loading动画不一样，它并没有十分规则的圆圈动画，而是不规则的转圈，有5个小球互相撞击转圈来实现这款Loading动画特效。另外我们还可以看一款HTML5 Canvas实现超酷Loading动画，也非常不错。

​编辑

在线演示 / 源码下载

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

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

​编辑

在线演示 / 源码下载

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

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

​编辑

在线演示 / 源码下载

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

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

​编辑

在线演示 / 源码下载