純CSS3冒泡動畫按鈕實現教程

標籤：style   blog   http   color   os   io   ar   div   cti   

這款CSS3動畫按鈕非常的有創意，滑鼠在滑過按鈕時並不像其他按鈕那樣僅僅改變按鈕的背景顏色，而是出現很酷的冒泡動畫。這麼驚豔的CSS3動畫按鈕，這篇文章主要將按鈕實現的過程和代碼分享給大家，希望能給在學習CSS3的同學帶來實質性的協助。可以下來看看線上示範效果：

線上示範        源碼下載

接下來我們來講解一下這款CSS3氣泡動畫的按鈕實現過程，主要由HTML代碼和CSS程式碼群組成。

HTML代碼：

<div id="buttonContainer">    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Big Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Medium Button</a>    <a href="#">Small Button</a>    <a href="#">Small Button</a>    <a href="#">Rounded</a>    <a href="#">Small Button</a>    <a href="#">Small Button</a>    <a href="#">Rounded</a></div>

HTML代碼相對比較簡單，即用一個個a連結構造按鈕，當然示範中的效果還需要CSS的大力渲染才行。

接下來的重點是CSS代碼，首先我們來為每一個button渲染基礎的樣式，這些樣式都是每一個按鈕所共有的：

.button{    font:15px Calibri, Arial, sans-serif;    /* A semi-transparent text shadow */    text-shadow:1px 1px 0 rgba(255,255,255,0.4);    /* Overriding the default underline styling of the links */    text-decoration:none !important;    white-space:nowrap;    display:inline-block;    vertical-align:baseline;    position:relative;    cursor:pointer;    padding:10px 20px;    background-repeat:no-repeat;    /* The following two rules are fallbacks, in case       the browser does not support multiple backgrounds. */    background-position:bottom left;    background-image:url(‘button_bg.png‘);    /* Multiple backgrounds version. The background images       are defined individually in color classes */    background-position:bottom left, top right, 0 0, 0 0;    background-clip:border-box;    /* Applying a default border raidus of 8px */    -moz-border-radius:8px;    -webkit-border-radius:8px;    border-radius:8px;    /* A 1px highlight inside of the button */    -moz-box-shadow:0 0 1px #fff inset;    -webkit-box-shadow:0 0 1px #fff inset;    box-shadow:0 0 1px #fff inset;    /* Animating the background positions with CSS3 */    /* Currently works only in Safari/Chrome */    -webkit-transition:background-position 1s;    -moz-transition:background-position 1s;    transition:background-position 1s;}.button:hover{    /* The first rule is a fallback, in case the browser       does not support multiple backgrounds    */    background-position:top left;    background-position:top left, bottom right, 0 0, 0 0;}.button:active{    /* Moving the button 1px to the bottom when clicked */    bottom:-1px;}

同樣也定義了按鈕在滑鼠滑過和被啟用時的樣式。

最後是氣泡動畫特效，我們拿其中一個按鈕為例，代碼如下：

.blue.button{    color:#0f4b6d !important;    border:1px solid #84acc3 !important;    /* A fallback background color */    background-color: #48b5f2;    /* Specifying a version with gradients according to */    background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),                        -moz-radial-gradient(    center bottom, circle,                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),                        -moz-linear-gradient(#4fbbf7, #3faeeb);    background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));}.blue.button:hover{    background-color:#63c7fe;    background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),                        -moz-radial-gradient(    center bottom, circle,                                                rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),                        -moz-linear-gradient(#63c7fe, #58bef7);    background-image:    url(‘button_bg.png‘), url(‘button_bg.png‘),                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));}

從代碼中我們可以看出，當滑鼠滑過按鈕時，按鈕中的氣泡背景圖片將實現漸層的動畫效果，並加以一定的透明效果，這樣便出現了氣泡上升的動畫特效。所有的代碼就是這樣，你可以下載原始碼來研究。

線上示範        源碼下載

純CSS3冒泡動畫按鈕實現教程