网页设计工作中，我们可以给很多元素添加发光的动画效果，举几个例子，“输入框”、“文字”、“进度条”等。给这些元素加上的发光特效会让整个网页变得更加炫酷。今天陕西优就业小编就为大家搜集整理了8款炫酷的HTML发光动画，这些都可以用作Web前端开发工作中，可以为你节省很多开发时间。

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

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

2.jQuery/CSS3实现漂亮字体发光特效

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

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

之前我们分享过几个不错的CSS3立方体动画，比如这款HTML5 3D立方体旋转动画和HTML5 3D立方体图片切换动画。今天要分享的也是一款基于CSS3的3D立方体旋转动画，不同的是，这款立方体的每一个面都有不同的色彩，并且会带有绚丽的发光特效。

4.纯CSS3实现发光开关切换按钮

前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮，效果相当赞。今天我们要来分享一款类似的纯CSS3发光开关切换按钮，它的外观就像一个电灯的开关，可以左右切换。另外开关上的文字还有发光的特效，整体看上去很有立体感。

5.纯CSS3和SVG鼠标滑过灯泡发光特效

这次要分享一款利用纯CSS3和SVG实现的灯泡发光效果，我们只需要将鼠标滑过灯泡，整个灯泡就会出现发光发亮的动画特效，效果相当逼真。CSS3的运用，让灯泡外围有一层淡淡的光晕。并且在灯光点亮和熄灭的时候有淡入淡出的效果。

6.HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

7.CSS3发光Loading加载动画

今天我们要分享一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。另外我们可以再回顾一下其他的CSS3 Loading效果：HTML5 Canvas实现超酷Loading动画、很有个性的CSS3弹跳Loading动画。

8.纯CSS3实现发光动画按钮特效

这是一款基于纯CSS3的发光按钮，按钮发光的颜色是随机的，这样一排按钮就显得五彩缤纷，非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮，比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等，都非常不错，也有HTML5动画按钮，大家可以自己看看。

陕西优就业：http://www.ujiuye.com/shaanxi/

IT学习交流：468910291

、范围滑块选择 ion.rangeSlider

ion.rangeSlider是一种简单、灵活、范围内选择方便的滑块选择器。

它支持事件和公共方法，具有灵活的设置，可以用CSS来完全改变

跨浏览器支持（Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+）

支持主流的设备（iPhone, iPad, Nexus等）

主页：https://github.com/IonDen/ion.rangeSlider

2、范围选择滑块 Powerange

Powerange是一个范围滑块控件，首先它很容易定制，它完全都是由CSS和JavaScript组成。其次它包含许多功能，包括改变颜色和整体风格，水平和垂直的风格，自定义之间切换，最大值和初始值，自定义步骤的时间间隔，显示十进制值，显示而不是最小/最大号的图标。

跨浏览器支持：谷歌浏览器14+，Mozilla Firefox浏览器6.0以上版本，歌剧11.6+，Safari 5以上版本，IE 9+

主页：http://abpetkov.github.io/powerange/

3、按钮切换开关 Switchery

Switchery是一个简单的组件，它可以帮助你把你的默认的HTML复选框，只需要几个简单的步骤就设置为iOS 风格切换方式。您可以轻松地使用CSS自定义开关，使他们完美匹配您的设计。

支持所有主流浏览器（Chrome, Firefox, Opera, Safari, IE8+）

主页：http://abpetkov.github.io/switchery/

4、弹窗插件 Sweet Alert

Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央，不管您使用的是台式电脑，手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择，可以灵活控制。

主页：http://t4t5.github.io/sweetalert/

5、通知插件 Toastr

toastr 是一个实现了类似 Android 的 Toast 提示的 jQuery 插件。

主页：https://github.com/CodeSeven/toastr

6、页面加载动画SpinKit

spinkit使用CSS3的特性实现多种动画效果，元素移动、放大缩小、翻转、进度条加载效果等等，使用了很多CSS3新的特性。

主页：https://github.com/tobiasahlin/SpinKit

演示网址：http://tobiasahlin.com/spinkit/

7、交互式图表HighCharts

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在您的web网站或是web应用程序添加有交互性的图表。目前HighCharts支持的图表类型有：直线图、曲线图、区域图、区域曲线图、柱状图、饼状图和散状点图等。它的显示速度很快，看起来很雅致，并且界面漂亮。它含有大量的配置选项和可扩展性。一个组件系統可让您未使用的功能压缩到一个10kB的文件大小。它还具有良好的兼容性和可访问性，当用户在Javascrip 失效的情況下，或是使用早期版本的浏览器，浏览器仍然会重定向到图片本身或事先指定的HTML页。

主页：http://www.highcharts.com/

8、焦点图SuperSlide

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！

还可以多个SuperSlide组合创造更多效果哦~（兼容包括ie6的绝大部分浏览器）

下面这个图上使用了5种以上相应的效果，只引用了一次插件

主页：http://www.superslide2.com/

PS：官网介绍包括的扩展效果，是用SuperSlide制作的，有些特殊的效果会加少量js，如果你熟练掌握SuperSlide，你也可以制作一模一样的效果，甚至更好。对于刚刚接触的朋友，如果真的不想自己研究，请留下邮箱，我抽时间会一一发送。

9、jquery.cookie

一个简单的，轻量级的jQuery插件用于读取，写入和删除的cookie。

主页：https://github.com/carhartl/jquery-cookie

10、Custombox

Custombox是基于 CSS3 过渡功能实现的 jQuery 模式窗口插件。有许多效果，如淡入，滑动，模糊，翻转，旋转等等。截图不能突出效果，强烈推荐看看演示。

主页：https://github.com/dixso/custombox

演示地址：http://dixso.github.io/custombox/

这次就介绍这10款吧，其实我认为，所有插件、控件都是让我们在开发过程中尽可能缩短时间的工具，“工欲善其事，必先利其器”，可能真正的“牛人”都是自己需要什么写什么，但是大多数开发者可能还达不到那种境界，亦或者不愿意浪费那个时间和精力，所以，收集自己会使用或者常用的工具，何乐而不为呢。谢谢支持，下次继续。