基於CSS3 animation的滑鼠滑過按鈕特效的執行個體詳解

　　簡要教程

　　這是一組使用CSS3 animation製作的滑鼠滑過按鈕動畫特效。這組滑鼠滑過按鈕動畫共有13最後效果，均由按鈕的虛擬元素和CSS3 animation來製作完成。

查看示範 下載外掛程式

　　使用方法

　　HTML結構

　　該效果通過超連結來製作按鈕，例如第一種Swipe效果的HTML代碼為：

<a class="btn-0" href="#">Swipe</a>

　　CSS樣式

　　為了方便，特效中為除了<i>、<em>、<b>、<strong>和<span>之外的所有元素都添加了動畫過渡效果。

html *,html *:before,html *:after {  box-sizing: border-box;  -webkit-transition: 0.5s;  transition: 0.5s;}html i, html em,html b, html strong,html span {  -webkit-transition: none;  transition: none;}

　　然後為按鈕設定通用樣式。

a {  text-decoration: none;  line-height: 80px;  color: black;}[class^="btn-"] {  position: relative;  display: block;  margin: 20px auto;  width: 100%;  height: 80px;  max-width: 250px;  text-transform: uppercase;  overflow: hidden;  border: 1px solid currentColor;}

　　在第一個DEMO中，通過按鈕的:before虛擬元素來製作深紫色的滑塊。滑塊採用絕對位置，位於按鈕的左側位置，開始時它的寬度為0.

.btn-0 {  color: #9a3789;}.btn-0:before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 80px;  background: #520c46;}

　　在滑鼠滑過按鈕時，按鈕的字型顏色過渡為白色，:before虛擬元素的寬度有0變化為100%。

.btn-0:hover {  color: #e1c4dc;}.btn-0:hover:before {  width: 250px;}

　　在使用者點擊按鈕時，再為按鈕的背景色變換一種較淺的紫色。

.btn-0:active {  background: #881474;}