9个非常有意思的HTML5动画推荐

柔情只为你懂 2022-08-07 06:37 200阅读 0赞

这次要推荐的是9款非常有意思的[HTML5][]动画，这些动画有些是基于Cavans的，有些是SVG结合HTML5实现的，让我们一起来看看。

## 1、HTML5梦幻特效 可给任意元素添加魔幻效果 ##

我们之前介绍[HTML5动画][HTML5 1]特效比较多的是[HTML5 3D][]特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

[![html5-magic-effect][]][html5-magic-effect 1]

[在线演示][html5-magic-effect 1]        [源码下载][Link 1]

## 2、HTML5 Canvas正弦波动画 可自定义波长和速度 ##

正弦波我们很熟悉，以前数学和物理课上经常会用到，还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关，我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性，很酷吧。

[![html5-canvas-sin-animation][]][html5-canvas-sin-animation 1]

[在线演示][html5-canvas-sin-animation 1]        [源码下载][Link 2]

## 3、[CSS3按钮][CSS3]发光动画 绚丽多彩 ##

今天分享一款基于纯CSS3的发光按钮，多种色彩的按钮排列在网页上，伴随着闪闪发光的效果，CSS3的强大肯定会让你叹为观止。该[CSS3按钮][CSS3]发光动画主要是利用了webkit的动画属性，让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛，但是在一些需要特效的网页中用来做提交表单按钮或者菜单项，那就非常方便了。

[![css3-shine-buttons][]][css3-shine-buttons 1]

[在线演示][css3-shine-buttons 1]        [源码下载][Link 3]

## 4、HTML5 WebGL水面水波荡漾特效 ##

之前已经向各位分享过一款很逼真的[HTML5水波荡漾特效][HTML5 2]，效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。

[![html5-webgl-water-effect][]][html5-webgl-water-effect 1]

[在线演示][html5-webgl-water-effect 1]        [源码下载][Link 4]

## 5、HTML5树叶飘落动画 ##

今天再来分享一款HTML5树叶飘落动画，这款HTML5树叶飘落动画是基于webkit内核的，所以需要webkit内核的浏览器才能播放该动画，效果真的非常酷。

[![css3-fall-leaves][]][css3-fall-leaves 1]

[在线演示][css3-fall-leaves 1]        [源码下载][Link 5]

## 6、[HTML5 3D][]衣服摆动特效 ##

前面我们介绍过很多HTML5 3D动画特效，最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效，动画也是在HTML5 Canvas上完成，它模拟衣服晾在绳子上，点击鼠标可以让衣服摆动起来，就行风吹动它一样，非常逼真炫酷。

[![html5-3d-cloth][]][html5-3d-cloth 1]

[在线演示][html5-3d-cloth 1]        [源码下载][Link 6]

## 7、HTML5鲸鱼动画 ##

之前看到过同样效果的一款鲸鱼动画，不过可惜的是那个动画是用flash制作的。今天我找到了基于[HTML5][]的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML5确实很给力，[HTML5动画][HTML5 1]完全可以完成flash能做的事情。

[![html5-whale][]][html5-whale 1]

[在线演示][html5-whale 1]        [源码下载][Link 7]

## 8、纯CSS3 Android Logo动画绘制 ##

利用CSS3可以绘制很多复杂的图案图标，今天就利用纯CSS3实现Android Logo图标，该CSS3 Android Logo主要利用了CSS3中的圆角等属性，绘制出来的Logo非常逼真，同时该Android Logo还有动画效果，鼠标滑过Android小人的头和手时，小手还能够挥动。

[![css3-android-logo][]][css3-android-logo 1]

[在线演示][css3-android-logo 1]        [源码下载][Link 8]

## 9、纯CSS3绘制可爱小男孩动画 ##

之前我们分享过几个纯CSS3动画特效，比如[纯CSS3人物行走动画][CSS3 1]就非常酷，还有[纯CSS3 Android Logo动画绘制][Link 8]也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。

[![pure-css3-boy-animation][]][pure-css3-boy-animation 1]

[在线演示][pure-css3-boy-animation 1]        [源码下载][Link 9]

以上就是9个非常有意思的[HTML5动画][HTML5 1]，欢迎收藏分享。  
转载请注明原文链接：[http://www.html5tricks.com/9-funny-html5-animation.html][http_www.html5tricks.com_9-funny-html5-animation.html]

[HTML5]: http://www.html5tricks.com/
[HTML5 1]: http://www.html5tricks.com/tag/html5%e5%8a%a8%e7%94%bb
[HTML5 3D]: http://www.html5tricks.com/tag/html5-3d
[html5-magic-effect]: /images/20220805/2df65c4be9ae45be9f8507d251faa84c.png
[html5-magic-effect 1]: http://www.html5tricks.com/demo/html5-canvas-magic-effect/index.html
[Link 1]: http://www.html5tricks.com/html5-magic-effect.html
[html5-canvas-sin-animation]: /images/20220805/935556bc69214f76888308659325e9b2.png
[html5-canvas-sin-animation 1]: http://www.html5tricks.com/demo/html5-canvas-sin/index.html
[Link 2]: http://www.html5tricks.com/html5-canvas-sin-animation.html
[CSS3]: http://www.html5tricks.com/tag/css3%e6%8c%89%e9%92%ae
[css3-shine-buttons]: /images/20220805/a739023e01a84ec1b3eb8e9b76f9163f.png
[css3-shine-buttons 1]: http://www.html5tricks.com/demo/css3-shine-button/index.html
[Link 3]: http://www.html5tricks.com/css3-shine-buttons.html
[HTML5 2]: http://www.html5tricks.com/html5-water-ripple.html
[html5-webgl-water-effect]: /images/20220805/1a65af129b764339971b3b361df95b90.png
[html5-webgl-water-effect 1]: http://www.html5tricks.com/demo/webgl-water/index.html
[Link 4]: http://www.html5tricks.com/html5-webgl-water-effect.html
[css3-fall-leaves]: /images/20220805/132c46c79a4f4f0cae4ae84f4fc5ed0c.png
[css3-fall-leaves 1]: http://www.html5tricks.com/demo/css3-fall-leaves/index.html
[Link 5]: http://www.html5tricks.com/css3-fall-leaves.html
[html5-3d-cloth]: /images/20220805/986473d4017540b99490b817c7ee8f8d.png
[html5-3d-cloth 1]: http://www.html5tricks.com/demo/html5-3d-cloth/index.html
[Link 6]: http://www.html5tricks.com/html5-3d-cloth.html
[html5-whale]: /images/20220805/66b5730efcb7409f900407582d3f9fd1.png
[html5-whale 1]: http://www.html5tricks.com/demo/html5-whale/index.html
[Link 7]: http://www.html5tricks.com/html5-whale.html
[css3-android-logo]: /images/20220805/1702809e054649dbb37439931eb6c07b.png
[css3-android-logo 1]: http://www.html5tricks.com/demo/jiaoben948/index.html
[Link 8]: http://www.html5tricks.com/css3-android-logo.html
[CSS3 1]: http://www.html5tricks.com/css3-walking-animation.html
[pure-css3-boy-animation]: /images/20220805/bd672f96e6364715855b1f94cc56bed1.png
[pure-css3-boy-animation 1]: http://www.html5tricks.com/demo/html5-boy-animation/index.html
[Link 9]: http://www.html5tricks.com/pure-css3-boy-animation.html
[http_www.html5tricks.com_9-funny-html5-animation.html]: http://www.html5tricks.com/9-funny-html5-animation.html