Css和JS实现下划线动效的方法示例

本文主要讲述两种下划线动效效果,第一种悬停时 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;