鼠標(biāo)懸停按鈕邊框的線條動(dòng)畫效果
在頁(yè)面開(kāi)發(fā)中，有不少地方都是需要添加交互效果的，譬如鼠標(biāo)懸停文字變顏色、添加陰影內(nèi)容模塊的位置移動(dòng)，放大縮小等，而鼠標(biāo)懸停觸發(fā)流暢的線條動(dòng)畫效果，不僅使頁(yè)面增加了有趣的交互效果，還能給用戶帶來(lái)一些好的使用體驗(yàn)。線條的動(dòng)畫效果可以用偽類實(shí)現(xiàn)，如下圖：

    
 
首先需要設(shè)置鼠標(biāo)懸停觸發(fā)動(dòng)畫前的圖的基本樣式，還需設(shè)置動(dòng)畫過(guò)渡時(shí)間transition: transform 0.3s;還需要用到transform scaleX和transform scaleY，scaleX和scaleY分別表示設(shè)置水平方向縮放的倍數(shù)和設(shè)置垂直方向的倍數(shù)，第一個(gè)圖兩條橫向的線的鼠標(biāo)懸停觸發(fā)動(dòng)畫需要設(shè)置transform: scaleX(0);還需要設(shè)置transform-origin，這里transform-origin是設(shè)置元素縮放偏移的位置，這里需要設(shè)置left、right、top、bottom、center，結(jié)合著使用。譬如第一個(gè)圖的第一根線設(shè)置transform-origin: left center;第第二根線設(shè)置transform-origin: right center; 后續(xù)鼠標(biāo)懸停觸發(fā)線條動(dòng)畫發(fā)生的方向就不同了。鼠標(biāo)懸停觸發(fā)動(dòng)畫，則需要設(shè)置transform: scaleX(1)或者transform: scaleY(1);因?yàn)榈谝粋€(gè)圖的兩根線水平方向發(fā)生動(dòng)畫，之前已經(jīng)設(shè)置了transform: scaleX(0);，現(xiàn)在則需要設(shè)置transform: scaleX(1); 第二個(gè)圖的觸發(fā)動(dòng)畫過(guò)程也如第一個(gè)圖的設(shè)置類似，不同的只是水平方向和垂直方向的區(qū)別。
Html：
<div class="btnBox"><a href="" class="btn1">Learn  More</a></div>
Css:
.btnBox{ display: flex; align-items: center; justify-content: center; margin-top: 60px; } .btnBox a{ position: relative; color: #FFFFFF; font-family: math; font-size: 20px; padding: 15px 25px; margin: 0 34px; } .btnBox a:before, .btnBox a:after { position: absolute; content: ""; display: block; transition: transform 0.3s; background-color: #ff2626; } .btnBox a.btn1:before, .btnBox a.btn1:after{ left: 0; width: 100%; height: 2px; -webkit-transform: scaleX(0); transform: scaleX(0); } .btnBox a.btn1:before{ top: 0; } .btnBox a.btn1:after{ bottom: 0; } .btnBox a.btn1:before{ -webkit-transform-origin: left center; transform-origin: left center; } .btnBox a.btn1:after{ -webkit-transform-origin: right center; transform-origin: right center; } .btnBox a.btn1:hover:before, .btnBox a.btn1:hover:after{ -webkit-transform: scaleX(1); transform: scaleX(1); }