怎么在html中实现js效果,CSS+JS如何实现动态下划线效果？(示例介绍)

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;

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;

}

本文转载自：https://segmentfault.com/a/1190000021674402

更多web前端开发知识，请查阅 HTML中文网 ！！