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

5268f80b9b1e01f982625ef6fac83ca1.png

fbdaea44cc4240c825b4ebdb2672376e.png

本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。

实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果。

x轴由内向外展开

15c9be069c152df50195decffc24c2f5.png

利用贝塞尔曲线利用横线的动画实现,具体代码如下: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:


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部