So erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS

In diesem Artikel geht es hauptsächlich um zwei Unterstreichungsanimationseffekte. Der erste besteht darin, die X-Achse beim Schweben zu erweitern, um den Animationseffekt zu erzielen um automatisch links und rechts, von links nach rechts oder von rechts nach links anzuzeigen.

Der Haupteffekt besteht darin, Pseudoklassen-Tags, Hover und Transfromm-Trition zu verwenden, um Animationseffekte zu erzielen.

Die x-Achse dehnt sich von innen nach außen aus

Verwenden Sie die Bezier-Kurve, um die Animation horizontaler Linien zu realisieren. Der spezifische Code lautet wie folgt:

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

(Empfohlenes Tutorial: CSS-Tutorial)

Linke und rechte horizontale Unterstreichungsanimationseffekte

Verwenden Sie hauptsächlich js, um Bestimmen Sie die Position der Maus, wenn sie wegbewegt wird. Bewegen Sie den Animationseffekt nach links und rechts hinein und heraus, um ihn anzuzeigen.

JS-Code lautet wie folgt:

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

  };

});

css Verwenden Sie Pseudo- Klassen-Tags zum Realisieren von Animationseffekten

Der CSS-Code lautet wie folgt:

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

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!