How to achieve underline sliding effect in css-CSS Tutorial-php.cn

How to achieve underline sliding effect in css

王林

Release： 2020-04-07 09:16:07

forward

2870 people have browsed it

How to achieve underline sliding effect in css

This article mainly talks about two underline animation effects. The first one is to expand the X-axis from the inside to the outside when hovering to achieve the animation effect. The second one is to automatically display left and right, from left to right. , or from right to left.

The main effect achieved is to use pseudo-class tags, hover, and transfromm trition to achieve animation effects.

The x-axis expands from the inside out

How to achieve underline sliding effect in css

Use Bezier curve to realize the animation of horizontal lines. The specific code is as follows:

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);
}

Copy after login

(Recommended tutorial: CSS tutorial)

Left and right horizontal underline animation effects

How to achieve underline sliding effect in css

Mainly use js to determine the position of the mouse when it is moved away , the left and right movement in and out display of the animation effect

js code is as follows:

document.querySelectorAll(&#39;a&#39;).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(&#39;--x&#39;, `${x}px`);

  };

});

Copy after login

css The animation implementation of animation effect using pseudo-class tags

css code is as follows :

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: &#39;&#39;;
  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;
}

Copy after login

Related tutorial recommendations: css video tutorial

The above is the detailed content of How to achieve underline sliding effect in css. For more information, please follow other related articles on the PHP Chinese website!