家好，今天給大家介紹一款，js+css實(shí)現(xiàn)的按鈕懸停動(dòng)畫(huà)特效html頁(yè)面前端源碼，隨機(jī)元素彈出（圖1）。送給大家哦，獲取方式在本文末尾。

鼠標(biāo)經(jīng)過(guò)按鈕區(qū)域的時(shí)候，會(huì)隨機(jī)從不同位置上彈出很多小元素，效果很不錯(cuò)（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

本源碼編碼：20238，需要的朋友，訪問(wèn)下面鏈接后，搜索20238，即可獲取。

「鏈接」

于前端開(kāi)發(fā)人員來(lái)說(shuō)，css是我們?cè)偈煜げ贿^(guò)的朋友的，它就相當(dāng)于是我們頁(yè)面的衣服，頁(yè)面好不好看，就看我們css運(yùn)用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學(xué)起來(lái)簡(jiǎn)單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點(diǎn)時(shí)間就可以的，需要我們的日積月累，時(shí)刻專研。

而今天，就帶給大家一個(gè)CSS特效-霓虹燈按鈕，這也是我看到很不錯(cuò)的效果，帶來(lái)分享給大家，希望大家喜歡[送心][送心][送心]

效果如下：

那好，廢話不多說(shuō)，開(kāi)始我們的CSS代碼。

準(zhǔn)備一個(gè)HTML標(biāo)簽

// 這里我們用div標(biāo)簽來(lái)模擬button按鈕，標(biāo)簽可以隨意，a、p、span等都可以
// 通常在開(kāi)發(fā)中使用別的標(biāo)簽來(lái)代替button標(biāo)簽，是因?yàn)樵嫉臉?biāo)簽樣式不好看，
// 我們還得重置樣式，而其他標(biāo)簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當(dāng)然，button標(biāo)簽也是可以的，但是如前面所說(shuō)，原始的樣式需要我們重置。
<div class="btn">button</div>

CSS部分的代碼

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只為更能突出樣式效果
}
// 初始化按鈕樣式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 漸變屬性，函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始樣式為這樣：

然后我們給按鈕加上動(dòng)畫(huà)，代碼如下：

.btn:hover {
  	// linear: 動(dòng)畫(huà)從開(kāi)始到結(jié)束具有相同的速度。
    // infinite: 無(wú)限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就變?yōu)橄旅孢@樣：

最后我們給它加上鼠標(biāo)移上去的效果，代碼如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

現(xiàn)在這樣，就是我們的最終效果了：

就此，我們的霓虹燈的按鈕效果就完成了

不足百行，我們就完成了這個(gè)效果，以下是我們的CSS的全部代碼：