Css和JS如何实现下划线动效

小编给大家分享一下Css和JS如何实现下划线动效，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

实现的主要效果是利用伪类标签，以及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: 30px 25px 30px 25px;  cursor: pointer;}ul li::after {  position: absolute;  content: "";  top: 100%;  left: 0;  width: 100%;  height: 2px;  background: #3498db;  transform: scaleX(0);  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}ul li:hover::after, ul li.active::after {  transform: scaleX(1);}

左右横移下划线动画特效

主要利用js判断鼠标移开时的位置，对动画效果的进行左右移入移出显示
 

js代码如下：

document.querySelectorAll('a').forEach(elem => {  elem.onmouseenter =  elem.onmouseleave = e => {    const tolerance = 5;    const left = 0;    const right = elem.clientWidth;    let x = e.pageX - elem.offsetLeft;    if (x - tolerance < left) x = left;    if (x + tolerance > right) x = right;    elem.style.setProperty('--x', `${x}px`);  };});

css 利用伪类标签进行动画效果的动画实现
css代码如下：

a {  position: relative;  font-weight: 600;  text-decoration: none;  color: rgba(0, 0, 0, 0.4);  transition: color .3s ease;}a::after {  --scale: 0;  content: '';  position: absolute;  left: 0;  right: 0;  top: 100%;  height: 3px;  background: #4c81c9;  -webkit-transform: scaleX(var(--scale));          transform: scaleX(var(--scale));  -webkit-transform-origin: var(--x) 50%;          transform-origin: var(--x) 50%;  transition: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);  transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);}a:hover {  color: #4c81c9;}a:hover::after {  --scale: 1;}

看完了这篇文章，相信你对“Css和JS如何实现下划线动效”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！