鼠标悬停按钮边框的线条动画效果

　　在盐城网站开发公司开发中,有不少地方都是需要添加交互效果的,譬如鼠标悬停文字变颜色、添加阴影内容模块的位置chinamobile,放大缩小等,而鼠标悬停触发流畅的线条动画效果,不仅使盐城网站开发公司增加了有趣的交互效果,还能给客户带来一些好的使用体验.线条的动画效果可以用伪类完成,如下图：

　　首先需要设定鼠标悬停触发动画前的图的基本样式,还需设定动画过渡时间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;第第2根线设定transform-origin: right center; 后续鼠标悬停触发线条动画发生的方向就不同了.鼠标悬停触发动画,则需要设定transform: scalex(1)或者transform: scaley(1);因为第一个图的两根线水平方向发生动画,之前已经设定了transform: scalex(0);,现在则需要设定transform: scalex(1); 第2个图的触发动画过程也如第一个图的设定类似,不同的只是水平方向和垂直方向的差别.

　　html：

　　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; -网站kit-transform: scalex(0); transform: scalex(0); } .btnbox a.btn1:before{ top: 0; } .btnbox a.btn1:after{ bottom: 0; } .btnbox a.btn1:before{ -网站kit-transform-origin: left center; transform-origin: left center; } .btnbox a.btn1:after{ -网站kit-transform-origin: right center; transform-origin: right center; } .btnbox a.btn1:hover:before, .btnbox a.btn1:hover:after{ -网站kit-transform: scalex(1); transform: scalex(1); }