這篇“純CSS3如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“純CSS3如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供永仁網(wǎng)站建設(shè)、永仁做網(wǎng)站、永仁網(wǎng)站設(shè)計(jì)、永仁網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、永仁企業(yè)網(wǎng)站模板建站服務(wù)，十年永仁做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

效果示例：

看過(guò)前兩小節(jié)的小伙伴，可能不需要看下面的源碼，就知道如何實(shí)現(xiàn)了，大家可以先自己動(dòng)手試試，然后再回頭來(lái)看看?；蛟S實(shí)現(xiàn)方式不一樣，但只要能實(shí)現(xiàn)，都是好方法。

下面對(duì)示例講解

示例一

<button class="btn-1">按鈕一</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  background: none;
  cursor: pointer;
  color: #fff;
  border: none;
  margin-right: 20px;
  margin-bottom: 20px;
}
button:before, 
button:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all .5s;
}
/* 按鈕一 */
.btn-1:before, .btn-1:after{
  height: 2px;
  left: 50%;
  width: 0;
  background: #f13f84;
  transform: translateX(-50%);
}
.btn-1:before{
  top: 0;
}
.btn-1:after{
  bottom: 0;
}
.btn-1:hover:before, 
.btn-1:hover:after{
  width: 100%;
}
</style>

解析：

1、 :before top為0， :after bottom為0，高度 height: 2px ，而寬度為0，并且水平居中

2、在絕對(duì)定位的作用下， :hover 改變 :before 、 :after 的寬度，即可形成上圖效果

示例二

<button class="btn-2">按鈕二</button>

<style>
...
/* 這里省略上方的公共樣式 */
.btn-2{
  background: #333;
  height: 36px;
}
.btn-2:before, 
.btn-2:after{
  width: 10px;
  height: 10px;
  background: #f13f84;
  mix-blend-mode: hue;
}
.btn-2:before {
  left: -2px;
  top: -2px;
}
.btn-2:after {
  right: -2px;
  bottom: -2px;
}
.btn-2:hover:before, 
.btn-2:hover:after{
  height: calc(100% + 4px);
  width: calc(100% + 4px);
}
</style>

解析：

1、 :before 、 :after ，超出button 2px

2、 :hover 時(shí)改變 :before 、 :after 寬高，這里寬高用到了 calc()

calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。

● 需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如： width: calc(100% - 10px) ；

● 任何長(zhǎng)度值都可以使用 calc() 函數(shù)進(jìn)行計(jì)算；

● calc() 函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

● calc() 函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

3、大家應(yīng)該都留意到了上圖中，特意操作了一個(gè)屬性 mix-blend-mode ，它在這里的作用讓button的背景顯示出來(lái)覆蓋在 :before 、 :after 背景色的上方。

css3 mix-blend-mode 語(yǔ)法

mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

hue 色相模式 “色相”模式只用“混合色”顏色的色相值進(jìn)行著色，而使飽和度和亮度值保持不變。

這里就不具體講述 mix-blend-mode ，希望后面能用一章來(lái)專門講解。

示例三

<button class="btn-3">
  <span>按鈕三</span>
</button>

<style>
...
/* 這里省略上方的公共樣式 */
button span:before, 
button span:after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all .5s;
}
.btn-3{
  background: #333;
  height: 36px;
}
.btn-3:before, 
.btn-3:after, 
.btn-3 span:before, 
.btn-3 span:after{
  width: 10px;
  height: 10px;
  background: #f13f84;
  mix-blend-mode: hue;
}
.btn-3:before {
  left: -2px;
  top: -2px;
}
.btn-3:after {
  right: -2px;
  top: -2px;
}
.btn-3 span:before {
  left: -2px;
  bottom: -2px;
}
.btn-3 span:after {
  right: -2px;
  bottom: -2px;
}
.btn-3:hover:before, 
.btn-3:hover:after,
.btn-3:hover span:before,
.btn-3:hover span:after {
  height: 60%;
  width: 60%;
}

解析：

1、示例三就是示例二的升級(jí)版，用span的偽類來(lái)完善按鈕的四只角

2、 :hover 時(shí)改變四個(gè)偽類的寬高即可。

示例四

<button class="btn-4">按鈕四</button>

<style>
...
/* 這里省略上方的公共樣式 */
.btn-4{
  height: 34px;
  border: 1px solid #f13f84;
}
.btn-4:before, 
.btn-4:after{
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #f13f84;
}
.btn-4:before {
  left: -4px;
  top: -4px;
  border-width: 1px 0 0 1px;
}
.btn-4:after {
  right: -4px;
  bottom: -4px;
  border-width: 0 1px 1px 0;
}
.btn-4:hover:before, 
.btn-4:hover:after{
  height: calc(100% + 7px);
  width: calc(100% + 7px);
}

解析：

1、示例四是示例二的另外一種實(shí)現(xiàn)方式，不過(guò)區(qū)別是按鈕加了一個(gè)邊框

2、 :before 、 :after 直接設(shè)置 border ，而不是用 background 來(lái)展示對(duì)角樣式。

width: 10px;
height: 10px;
border-style: solid;
border-color: #f13f84;
border-width: 1px 0 0 1px;

3、然后 :hover 時(shí)改變偽類寬高，即可

示例五

<button class="btn-5">按鈕五</button>

<style>
...
/* 這里省略上方的公共樣式 */
.btn-5{
  background: #333;
  height: 34px;
  border: 1px solid #fff;
}
.btn-5:before, 
.btn-5:after{
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: #fff;
}
.btn-5:before {
  left: -4px;
  top: -4px;
  border-width: 1px 0 0 1px;
}
.btn-5:after {
  right: -4px;
  bottom: -4px;
  border-width: 0 1px 1px 0;
}
.btn-5:hover{
  border-color: #f13f84;
}
.btn-5:hover:before, 
.btn-5:hover:after{
  height: calc(100% + 7px);
  width: calc(100% + 7px);
  border-color: #f13f84;
  transform: rotateY(180deg);
}

解析：

1、示例五，與示例四只有2點(diǎn)區(qū)別， :hover 時(shí)，使其偽類旋轉(zhuǎn)180°，同時(shí)改變邊框顏色

border-color: #f13f84;
transform: rotateY(180deg);

示例六

<button class="btn-6">
  <span>按鈕六</span>
</button>

<style>
...
/* 這里省略上方的公共樣式 */
.btn-6{
  overflow: hidden;
}
.btn-6:before, 
.btn-6:after, 
.btn-6 span:before, 
.btn-6 span:after{
  background: linear-gradient(to right, rgba(0,0,0,0), #f13f84);
  transition: all 2s;
}
.btn-6:before, 
.btn-6:after{
  width: 100%;
  height: 1px;
}
.btn-6:before {
  top: 0;
  left: -100%;
}
.btn-6:after {
  bottom: 0;
  right: -100%;
}
.btn-6 span:before, .btn-6 span:after{
  width: 1px;
  height: 100%;
}
.btn-6 span:before {
  bottom: -100%;
  left: 0;
}
.btn-6 span:after {
  top: -100%;
  right: 0;
}
.btn-6:hover:before{
  animation: topA 1s linear infinite;
  animation-delay: .5s;
}
@keyframes topA{
  100%{
    left: 100%;
  }
}
.btn-6:hover span:after{
  animation: rightA 1s linear infinite;
  animation-delay: 1s;
}
@keyframes rightA{
  100%{
    top: 100%;
  }
}
.btn-6:hover:after{
  animation: bottomA 1s linear infinite;
  animation-delay: 1.5s;
}
@keyframes bottomA{
  100%{
    right: 100%;
  }
}
.btn-6:hover span:before {
  animation: leftA 1s linear infinite;
  animation-delay: 2s;
}
@keyframes leftA{
  100%{
    bottom: 100%;
  }
}

解析：

1、示例六，可以說(shuō)和示例三有一點(diǎn)點(diǎn)相似之處吧，升級(jí)版

2、也是通過(guò)四個(gè)偽類，分別分布在按鈕的上右下左位置，上下的偽類高度是1px，寬是100%，左右的偽類寬度是1px，高是100%，同時(shí)設(shè)置背景為線性漸變 linear-gradient

3、 :hover 時(shí)，上方偽類從左邊-100%的位置，向左邊100%的位置運(yùn)動(dòng)；右邊偽類從上方-100%的位置，向上方100%的位置運(yùn)動(dòng)；下發(fā)偽類從右邊-100%的位置，向右邊100%的位置運(yùn)動(dòng)；左邊偽類從下方-100%的位置，向下方100%的位置運(yùn)動(dòng)。然后設(shè)置延時(shí)執(zhí)行動(dòng)畫，即可。

需要注意的是延時(shí)執(zhí)行動(dòng)畫（animation-delay）時(shí)間，一定要調(diào)整好，否則看起來(lái)就沒(méi)有流暢，銜接會(huì)出現(xiàn)問(wèn)題。

示例七

<button class="btn-7">
  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="outline" height="100%" width="100%" />
    <div class="text">按鈕七</div>
  </svg>
</button>

<style>
...
/* 這里省略上方的公共樣式 */
.btn-7{
  position: relative;
  color: #f13f84;
  text-decoration: none;
  width: 250px;
  height: 50px;
  margin: 50px auto;
  overflow: hidden;
}
.btn-7 .outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: #f13f84;
  stroke-width: 2px;
  fill: transparent;
  stroke-dasharray: 100 500;
  stroke-dashoffset: 225;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-7 .text {
  position: relative;
  top: -35px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-7:hover .outline{
  stroke-dasharray: 600 0;
  stroke-dashoffset: 475;
}

解析：

1、示例七，是一種全選的方式，svg

2、svg 元素描述

<text> 元素用于定義文本

<rect> 定義為矩形形狀（圓形 <circle> 、橢圓 <ellipse> 、線 <line> 、折線 <polyline> 、多邊形 <polygon> 、路徑 <path> ）

3、svg 屬性描述

stroke 定義一條線，文本或元素輪廓顏色

stroke-width 屬性定義了一條線，文本或元素輪廓厚度

stroke-dasharray 屬性用來(lái)設(shè)置描邊的點(diǎn)劃線的圖案范式。就是設(shè)置實(shí)線和虛線的寬度。即有或者沒(méi)有線段的長(zhǎng)度。

stroke-dashoffset 則指定了dash模式到路徑開(kāi)始的距離

感謝你的閱讀，希望你對(duì)“純CSS3如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：純CSS3如何實(shí)現(xiàn)鼠標(biāo)滑過(guò)按鈕動(dòng)畫
網(wǎng)站地址：http://jinyejixie.com/article38/gdjisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗(yàn)、做網(wǎng)站、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)