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

    
 
首先需要設(shè)置鼠標懸停觸發(fā)動畫前的圖的基本樣式，還需設(shè)置動畫過渡時間transition: transform 0.3s;還需要用到transform scaleX和transform scaleY，scaleX和scaleY分別表示設(shè)置水平方向縮放的倍數(shù)和設(shè)置垂直方向的倍數(shù)，第一個圖兩條橫向的線的鼠標懸停觸發(fā)動畫需要設(shè)置transform: scaleX(0);還需要設(shè)置transform-origin，這里transform-origin是設(shè)置元素縮放偏移的位置，這里需要設(shè)置left、right、top、bottom、center，結(jié)合著使用。譬如第一個圖的第一根線設(shè)置transform-origin: left center;第第二根線設(shè)置transform-origin: right center; 后續(xù)鼠標懸停觸發(fā)線條動畫發(fā)生的方向就不同了。鼠標懸停觸發(fā)動畫，則需要設(shè)置transform: scaleX(1)或者transform: scaleY(1);因為第一個圖的兩根線水平方向發(fā)生動畫，之前已經(jīng)設(shè)置了transform: scaleX(0);，現(xiàn)在則需要設(shè)置transform: scaleX(1); 第二個圖的觸發(fā)動畫過程也如第一個圖的設(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); }