注本頭條號，專注做前端

它就是一個普通的按鈕，但是它通過html5+canvas做了點擊特效 ——點擊的時候會有彩色的粒子飛散開來，效果非炫酷。

//

網頁設計工作中，我們可以給很多元素添加發光的動畫效果，舉幾個例子，“輸入框”、“文字”、“進度條”等。給這些元素加上的發光特效會讓整個網頁變得更加炫酷。今天陜西優就業小編就為大家搜集整理了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

果圖

各位長友大家上午好！

今天給大家帶來的是 CSS3按鈕動畫特效源碼！

大家也可以按照自己的想法進行xiu改！

有想要文件版源碼的 可以私聊小編啊！

廢話不多說，上源碼！

CSS：

* {

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}