首頁 > web前端 > css教學 > 主體

基於CSS3 animation的滑鼠滑過按鈕特效的實例詳解

巴扎黑
發布: 2017-05-27 17:32:00
原創
1620 人瀏覽過

  簡要教學

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

 

基於CSS3 animation的滑鼠滑過按鈕特效的實例詳解

#看示範#下載外掛程式

  使用方法

#  HTML結構

#  此效果透過超連結來製作按鈕,例如第一種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;
}
登入後複製
  然後為按鈕設定通用樣式。

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: &#39;&#39;;
  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的滑鼠滑過按鈕特效的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板