So erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS-CSS-Tutorial-php.cn

So erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS

王林

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

nach vorne

2867 Leute haben es durchsucht

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

So erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS

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

Nach dem Login kopieren

(Empfohlenes Tutorial: CSS-Tutorial)

Linke und rechte horizontale Unterstreichungsanimationseffekte

So erzielen Sie einen Unterstreichungs-Gleiteffekt in CSS

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(&#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`);

  };

});

Nach dem Login kopieren

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

Nach dem Login kopieren

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!