30種CSS3動(dòng)畫特效按鈕

論是設(shè)計(jì)還前端開發(fā)，設(shè)計(jì)和制作個(gè)特效按鈕，對(duì)于他們來說，是習(xí)以為常的事情，下面是一組使用CSS3制作的炫酷鼠標(biāo)滑過按鈕動(dòng)畫特效。這30種鼠標(biāo)滑過按鈕的動(dòng)畫特效分別使用CSS3 transition和transform屬性來制作按鈕邊框，文本動(dòng)畫以及流光動(dòng)畫效果，各種效果都非常有創(chuàng)意。

演示地址：http://www.htmleaf.com/Demo/201510282718.html

使用方法

HTML結(jié)構(gòu)

按鈕的HTML結(jié)構(gòu)使用嵌套<div>結(jié)構(gòu)來制作。這里以第6種效果為例。

<div class="wrapper-inner-tab-backgrounds-first">
<div class="sim-button button6">
<span>Login</span>
</div>
</div>

css樣式

.button6{
color: rgba(255,255,255,1);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid rgba(255,255,255,0.5);
position: relative;
}

.button6 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}

按鈕中的文本采用絕對(duì)定位。

.button6 span{
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}

鼠標(biāo)滑過時(shí)動(dòng)畫的元素是一個(gè)::before偽元素，它被設(shè)置為絕對(duì)定位。這個(gè)效果開始時(shí)偽元素的大小為這個(gè)按鈕的一半大小，透明度為0。在鼠標(biāo)滑過的時(shí)候，它會(huì)被放大到按鈕大小，透明度過渡為1。

view sourceprint?

.button6::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
background-color: rgba(255,255,255,0.5);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}

.button6:hover::before{
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);

}

切圖網(wǎng)（qietu.com）是首家專門從事web前端開發(fā)的公司，專注we前端開發(fā)，響應(yīng)式布局，webapp手機(jī)端網(wǎng)頁制作，微信html5頁面制作，bootstrap布局等，關(guān)注用戶體驗(yàn)。

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

圖1

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

圖2

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

圖3

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

「鏈接」

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

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

效果如下：

最終效果

那好，廢話不多說，開始我們的CSS代碼。

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

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

.btn:hover {
  	// linear: 動(dòng)畫從開始到結(jié)束具有相同的速度。
    // infinite: 無限次播放
    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的全部代碼：

在線咨詢

上一篇：PDF轉(zhuǎn)HTML文件怎么弄？三個(gè)方法告訴你PDF轉(zhuǎn)HTML格式怎么轉(zhuǎn)
下一篇：用HTML、CSS 和 JS 構(gòu)建一個(gè)響應(yīng)式導(dǎo)航欄菜單-教程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

30種CSS3動(dòng)畫特效按鈕

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

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

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

本源碼編碼：20238，需要的朋友，訪問下面鏈接后，搜索20238，即可獲取。