時下,各種個性化展示網站都會通過滑鼠特效增強與使用者之間的互動，使得網站更加生動，彷彿懂得跟使用者談話一樣。就連展示模式相對古板的資訊類網站或者入口網站也抵擋不住誘惑，悄悄地加入了一些按鈕互動的效果。

　　本文將給大家介紹一類簡約而不簡單的滑鼠滑過按鈕特效，既能讓個人網站充分展示個性，也能為效果相對單調的門戶類網站增色不少。

　　首先我們來看一下，其中一種特效效果圖。

　　本例一共展示了13個動畫效果，按鈕的基本樣式相近，均為標籤居中的矩形按鈕，背景均為無色透明，邊框粗細一致，滑鼠移到按鈕上，標籤顏色變淺，背景通過緩動擦除過渡為邊框的初始顏色。因此我們可以先製作一套統一的樣式，然後再為各個按鈕擴展出不同的效果。

　　在開始之前，我們先來分析下這類按鈕的層級結構，自上而下分別是標籤，動畫背景和固定的線框，如下圖所示。

　　忽略動畫的部分，它可以是一個帶邊框的div+居中對齊的文字。

　　動畫部分跟標籤文字重疊，所以一般使用絕對定位套入其中。此時要把上面提到的div改為相對定位，否則無法對齊到邊框的左上角。

　　案例演示的13種動畫效果均為這種結構，為了讓中間的動畫部分可以重複使用，我們希望可以通過引用同一段程式碼來節省位元組數。實現的方法有很多，比如通過js插入節點。但作為css教程，小編更傾向於利用CSS樣式直接實現。具備這種插入功能的，是CSS的偽元素before和after，具體使用哪個，視實際效果而定。

　　用了偽元素來插入，按鈕就剩下一個帶邊框的層了，所以我們可以再簡化一點，利用連結來實現這款按鈕，基礎的html程式碼如下。

　　預設效果如下圖所示，連結帶下劃線，非常不美觀，而且沒有邊距，對按鈕來說不太合適。

　　所以我們為連結樣式設定以下兩項屬性，第一項代表去除文字修飾（比如下劃線），第二項通過設定行高來實現垂直邊距的調整。至於水平邊距，我們稍候再實現。

　　接下來我們設定btn-0的樣式，為了讓後續新增的btn-1，btn-2，...，btn-x都能共用，此處我們利用CSS的屬性選擇器來實現（想了解更多關於屬性選擇器的朋友可以到W3CSchool進行深入學習）。　

　　[class^="btn-"]代表所有class以btn-為開頭的元素，所以上面的btn-0將會應用以上的所有樣式，它將連結設定為塊狀，為的是讓它的行為更像一個真正的按鈕，接著設定按鈕寬高，換一下字型，讓文字居中對齊，並加上1畫素的邊框。最後設定相對定位，其原因前面已經解釋，此處不再重複。

　　完整程式碼如下：

　　再次執行，效果如下圖所示。

　　你可能會發現這種邊框並不通用，因為在效果演示裡面，邊框顏色始終跟文字顏色保持一致，所幸CSS支援一些變數型的值，比如顏色可以用currentColor動態獲取：

　　再次執行，效果如下圖所示，邊框顏色跟文字顏色同步了。

　　接著我們用剛才的紫色換掉這個難看的純藍。因為邊框已經跟文字顏色同步，所以我們改下元素的color屬性即可。

　　注意該顏色只應用於當前按鈕上，所以我們把color定義到了btn-0選擇器中。

　　再次執行，效果如下圖所示。按鈕變紫色了。

　　接下來就到本教程的重頭戲——偽元素了。由於每個按鈕的擦除特效不完全一致，所以我們還是先為btn定義偽元素before。

　　紅色部分的樣式表示在btn-0元素的前面插入一個佔滿整個btn-0的色塊，其背景色是一種較文字顏色深一點點的紫色。

　　佔滿的一般寫法：left和top都等於0，width和height都等於100%，position等於absolute。

　　再次執行，效果如下圖所示，文字直接被色塊擋住了。

　　可能是文字顏色跟背景色太接近了？我們可以試著把btn-0的color改成白色(#fff)，但效果依然沒有發生太大變化，只是邊框略微縮小了一點（跟白色背景沒對比了所以看起來像是沒掉了外層邊框）。

　　所以根本原因是色塊確實直接疊放在了文字上面，為此我們可以通過調整z-index修復這一問題。

　　再次執行，效果如下圖所示，這下文字恢復過來了。

　　這是滑鼠移到按鈕時的效果，所以我們把色塊和文字顏色的設定到hover上，並恢復正常狀態下的顏色，同時去掉背景的色塊。

　　注意到這次的調整並沒有把正常狀態下的before偽元素徹底刪掉，而是通過將width設定為0%來進行隱藏。因為我們稍候要通過CSS3的動畫進行過渡，所以必須要讓這個偽元素在一開始的時候就存在，而不能無中生有導致過渡效果突兀。

　　補充一個小小的細節，滑鼠滑過按鈕的時候，我們用的不是純白色，而是色調跟按鈕背景接近的淡紫色，從而提升文字跟背景的融合度。

　　再次執行，效果如下圖所示。

　　滑鼠滑過按鈕，效果將發生如下圖所示的變化。

　　最後就是實現過渡了，兩個狀態的平滑過渡可通過transition屬性來實現。

　　要過渡的包括按鈕邊框，按鈕文字和before偽元素（背景色塊），所以程式碼調整如下：

　　其中，4個不同字首的transition用於相容不同的瀏覽器。

　　此外，其它按鈕樣式可能會根據需要使用after偽元素，所以筆者特地加入了對after偽元素的樣式定義。

　　再次執行，滑鼠移到按鈕上，即可觀察到動畫效果了，如下圖所示。

　　類似地，我們還可以實現從右到左或者垂直方向的擦除效果。相信通過本教程的學習，調整出這些效果都是輕而易舉的事了。

　　如果想斜著擦除，那對於矩形結構的網頁元素來說，實現起來有點困難，所幸的是CSS3引入了transform屬性使矩形支援旋轉，比如我們給btn-0:before樣式追加一項：

　　transform:rotate(135deg);

　　那麼矩形塊就會旋轉135度了，如下圖所示。

　　色塊越界了，不過這完全不是問題，因為越界早在CSS1時代就有方法解決，用overflow:hidden就能把多餘的部分給裁剪掉。

　　我們為btn通用的樣式（屬性選擇器）追加這個定義，程式碼如下。

　　再次執行，效果如下圖所示。

　　在這個基礎上，把寬高的比例調整到大於100%的某個數值，就可以讓這個斜著擦除的色塊填滿整個按鈕的背景了，而且在此基礎上，我們還可以充分發揮創意，製作出更多更華麗的滑過效果，這當中甚至包括圓形動畫（可通過border-radius屬性實現）。

　　如果你現在缺乏靈感，那就回到本教程開頭，再次觀看演示頁面或者下載本教程的原始碼吧。你會從中學到更多更有趣的動畫技巧。

　　這案例共包含13種動畫效果，受篇幅所限，小編只給大家介紹了通用模板的製作過程以及在模板基礎上擴展出來的一個例子。在此小編通過最簡單的一個例項帶領大家入門，力求達到拋磚引玉的效果。希望大家在學會了這類動畫的原理之後，可以舉一反三，設計出更多精彩絕倫的CSS3按鈕特效，並且不吝將成果分享到課課家，讓其他讀者和小編們也開開眼界，大家共同進步!