html下划线 下移,css如何实现下划线滑动效果


本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。
实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果。
x轴由内向外展开

利用贝塞尔曲线利用横线的动画实现,具体代码如下:ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
}
ul:hover li:not(:hover) a {
opacity: 0.2;
}
ul li {
position: relative;
padding:
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
