前端实现炫酷动效_12个炫酷实用的HTML5带发光动画

本文作者html5tricks，转载请注明出处

在网页设计中，很多元素都可以实现发光的动画效果，比如输入框、文字、进度条等等。这些简单的元素加上炫酷的发光动画就会让整个页面戴上一层绚丽的色彩。今天我们就要为大家分享12款炫酷实用的

1、纯CSS3实现超炫酷的萤火虫动画

今天要为大家带来一款很有意思的纯CSS3动画，这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫，和之前分享的纯CSS3蚱蜢与纯CSS3打火机类似，这只萤火虫也是用CSS3绘制，并且点击萤火虫可以关闭和打开它的翅膀，同时萤火虫的闪闪发光也可以控制。

2、HTML5 Canvas五彩缤纷的3D发光水晶球动画

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画，就像是酒吧里的那种水晶球射灯一样，不停地随机变换射出光线的颜色，给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成，利用CSS3的相关特性使其能够出现五彩缤纷的发光动画，而且可以通过鼠标滚轮来放大缩小这个水晶球，不得不说HTML5真的是非常强大。

3、jQuery/CSS3实现漂亮字体发光特效

今天我们要来分享一款很酷的jQuery/CSS3文字发光特效，首先是加载了谷歌的公共字体库，因此字体非常特别和漂亮，另外利用了jQuery和CSS3的相关特性，当鼠标滑过文字时，文字将会出现发光的动画特效，非常漂亮。

4、超绚丽CSS3多色彩发光立方体旋转动画