400-800-9385
网站建设资讯详细

前端开发之css3边框线条动画效果

发表日期:2023-06-17 10:47:42   作者来源:林志平   浏览:1463   标签:前端开发    
鼠标悬停按钮边框的线条动画效果
在页面开发中,有不少地方都是需要添加交互效果的,譬如鼠标悬停文字变颜色、添加阴影内容模块的位置移动,放大缩小等,而鼠标悬停触发流畅的线条动画效果,不仅使页面增加了有趣的交互效果,还能给用户带来一些好的使用体验。线条的动画效果可以用伪类实现,如下图:

网页前端效果

    
 
首先需要设置鼠标悬停触发动画前的图的基本样式,还需设置动画过渡时间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); }
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6801.html