網頁設計工作中，我們可以給很多元素添加發光的動畫效果，舉幾個例子，“輸入框”、“文字”、“進度條”等。給這些元素加上的發光特效會讓整個網頁變得更加炫酷。今天陜西優就業小編就為大家搜集整理了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款吧，其實我認為，所有插件、控件都是讓我們在開發過程中盡可能縮短時間的工具，“工欲善其事，必先利其器”，可能真正的“牛人”都是自己需要什么寫什么，但是大多數開發者可能還達不到那種境界，亦或者不愿意浪費那個時間和精力，所以，收集自己會使用或者常用的工具，何樂而不為呢。謝謝支持，下次繼續。