css、JS实现下划线动态效果

本文主要介绍两种下划线动画效果。第一个是将X轴由内向外展开，实现悬停时的动画效果。第二种是自动显示左右，从左到右，还是从右到左！！实现的主要效果是使用伪类label，hover，使用transfrommtrition实现动画效果。x轴从内向外展开。贝塞尔曲线用于实现水平线的动画。具体代码如下：ul{display:flex;填充：0；保证金：0；list-style-type:none;}ul:hoverli:not(:hover)a{opacity:0.2;}ulli{position:relative;填充：30px25px30px25px；游标：指针；}ulli::after{位置：绝对；内容：””;顶部：100%；左：0；宽度：100%；高度：2px；背景：#3498db；转换：scaleX（0）；transition:0.4scubic-bezier(0.165,0.84,0.44,1);}ulli:hover::after,ulli.active::after{transform:scaleX(1);}左右下划线动画效果主要用js判断鼠标移动移入移出动画效果的js代码如下：document.querySelectorAll('a').forEach(elem=>{elem.onmouseenter=elem.onmouseleave=e=>{consttolerance=5;constleft=0;constright=elem.clientWidth;letx=e.pageX-elem.offsetLeft;if(x-toleranceright)x=right;电m.style.setProperty('--x',`${x}px`);};});css使用伪类标签实现动画效果的动画实现css代码如下：a{position:relative;字体粗细：600；文字修饰：无；颜色：rgba(0,0,0,0.4);过渡：颜色.3s缓和；}a::after{--scale:0;内容：'';位置：绝对；左：0；右：0；顶部：100%；高度：3px；背景：#4c81c9；-webkit转换：scaleX(var(--scale));转换：scaleX(var(--scale));webkit-transform-origin:var(--x)50%;变换原点：var(--x)50%；过渡：-webkit-transform0.3scubic-bezier(0.535,0.05,0.355,1);过渡：变换0.3秒立方贝塞尔曲线（0.535、0.05、0.355、1）；过渡：变换0.3s立方贝塞尔曲线（0.535、0.05、0.355、1），-webkit变换0.3s立方贝塞尔曲线（0.535、0.05、0.355、1）；}a：悬停{颜色：#4c81c9；}a：hover::after{--scale:1;}