冒泡動畫按鈕的簡單實現（使用CSS3） - tt-0411－IT工程師數位筆記本

文章出處

原始的參考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ，基本原理是利用了 hover，background-position 和 transition 三個屬性。

原文給出的實現細致完整，但是對于理解關鍵的實現原理不便，我按照原文的思路給出一種簡單實現，效果可以可見 http://jsbin.com/UbIJUfA/1/ 。

代碼如下（這段代碼只能在Chromium類瀏覽器工作）：

<!DOCTYPE html>
<html>
<style>
.btn {
    padding: 10px 20px;
    background-color: rgb(0, 162, 255);
    background-image: url("http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/buttons/button_bg.png");
    background-position:bottom left;
    -webkit-transition: background-position 1s;
}

.btn:hover{
    background-position:top left;
}
</style>

<p><a href="javascript:;" class="btn">Here!</a></p>
</html>

實現原理簡單說來：

首先是使用hover偽類和background-position，使得按鈕在鼠標滑入和滑出時按鈕背景產生“變化”，然后是用transition屬性把這個變化“放慢”從而產生“動畫”。hover常被用來產生對鼠標滑過的感應動畫效果。在本例中，background-image是一張尺寸比較大的帶氣泡圖案的圖片，hover的作用是設定background-position屬性，讓鼠標滑入時背景圖片的顯示區域從底部（bottom）移動到頂部（top），滑出時相反。由于hover對屬性的修改是瞬間完成的，所以需要配合transition的“減速”作用（當然實際情況可能是瀏覽器做為此生成了補間動畫）。

在原文中，作者還設置了其他屬性使得按鈕更美觀和具有普適性，還有些代碼是為了兼容多種瀏覽器，因此其余部分代碼也是值得學習研究一番的。

文章列表