30種CSS3動畫特效按鈕

論是設計還前端開發，設計和制作個特效按鈕，對于他們來說，是習以為常的事情，下面是一組使用CSS3制作的炫酷鼠標滑過按鈕動畫特效。這30種鼠標滑過按鈕的動畫特效分別使用CSS3 transition和transform屬性來制作按鈕邊框，文本動畫以及流光動畫效果，各種效果都非常有創意。

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

使用方法

HTML結構

按鈕的HTML結構使用嵌套<div>結構來制作。這里以第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;
}

按鈕中的文本采用絕對定位。

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

鼠標滑過時動畫的元素是一個::before偽元素，它被設置為絕對定位。這個效果開始時偽元素的大小為這個按鈕的一半大小，透明度為0。在鼠標滑過的時候，它會被放大到按鈕大小，透明度過渡為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);

}

切圖網（qietu.com）是首家專門從事web前端開發的公司，專注we前端開發，響應式布局，webapp手機端網頁制作，微信html5頁面制作，bootstrap布局等，關注用戶體驗。

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

圖1

鼠標經過按鈕區域的時候，會隨機從不同位置上彈出很多小元素，效果很不錯（圖2）

圖2

源碼完整，需要的朋友可以下載學習（圖3）

圖3

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

「鏈接」

于前端開發人員來說，css是我們再熟悉不過的朋友的，它就相當于是我們頁面的衣服，頁面好不好看，就看我們css運用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學起來簡單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點時間就可以的，需要我們的日積月累，時刻專研。

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

效果如下：

最終效果

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

準備一個HTML標簽

// 這里我們用div標簽來模擬button按鈕，標簽可以隨意，a、p、span等都可以
// 通常在開發中使用別的標簽來代替button標簽，是因為原始的標簽樣式不好看，
// 我們還得重置樣式，而其他標簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當然，button標簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<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() 漸變屬性，函數用于創建一個表示兩種或多種顏色線性漸變的圖片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始樣式為這樣：

初始樣式

然后我們給按鈕加上動畫，代碼如下：

.btn:hover {
  	// linear: 動畫從開始到結束具有相同的速度。
    // infinite: 無限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就變為下面這樣：

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

.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;
}

現在這樣，就是我們的最終效果了：

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

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

在線咨詢

上一篇：PDF轉HTML文件怎么弄？三個方法告訴你PDF轉HTML格式怎么轉
下一篇：用HTML、CSS 和 JS 構建一個響應式導航欄菜單-教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商