簡要教程

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

?

查看演示????? 下載插件

?

　　使用方法

　　HTML結(jié)構(gòu)

　　該效果通過超鏈接來制作按鈕，例如第一種Swipe效果的HTML代碼為：

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

　　CSS樣式

　　為了方便，特效中為除了、、、和之外的所有元素都添加了動畫過渡效果。

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

　　然后為按鈕設(shè)置通用樣式。

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偽元素來制作深紫色的滑塊。滑塊采用絕對定位，位于按鈕的左側(cè)位置，開始時它的寬度為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;
}

以上是基于CSS3 animation的鼠標滑過按鈕特效的實例詳解的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！