鼠标悬停按钮边框的线条动画效果
在页面开发中，有不少地方都是需要添加交互效果的，譬如鼠标悬停文字变颜色、添加阴影内容模块的位置移动，放大缩小等，而鼠标悬停触发流畅的线条动画效果，不仅使页面增加了有趣的交互效果，还能给用户带来一些好的使用体验。线条的动画效果可以用伪类实现，如下图：
首先需要设置鼠标悬停触发动画前的图的基本样式，还需设置动画过渡时间transition: transform 0.3s;还需要用到transform scaleX和transform scaleY，scaleX和scaleY分别表示设置水平方向缩放的倍数和设置垂直方向的倍数，第一个图两条横向的线的鼠标悬停触发动画需要设置transform: scaleX(0);还需要设置transform-origin，这里transform-origin是设置元素缩放偏移的位置，这里需要设置left、right、top、bottom、center，结合着使用。譬如第一个图的第一根线设置transform-origin: left center;第第二根线设置transform-origin: right center; 后续鼠标悬停触发线条动画发生的方向就不同了。鼠标悬停触发动画，则需要设置transform: scaleX(1)或者transform: scaleY(1);因为第一个图的两根线水平方向发生动画，之前已经设置了transform: scaleX(0);，现在则需要设置transform: scaleX(1); 第二个图的触发动画过程也如第一个图的设置类似，不同的只是水平方向和垂直方向的区别。
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); }
