LabEx
LoginBeitreten

Hover-Unterstrich-Animation

Intermediate

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man eine Hover-Unterstrich-Animation mit CSS erstellt. Dieses Effekt kann verwendet werden, um der Text visuelles Interesse hinzuzufügen und die Benutzererfahrung einer Website zu verbessern. Indem Sie den in diesem Lab beschriebenen Schritten folgen, werden Sie ein besseres Verständnis dafür erlangen, wie man CSS verwendet, um dynamisches und ansprechendes Webcontent zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Fortgeschrittener mit einer Abschlussquote von 77% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Hover-Unterstrich-Animation

index.html und style.css wurden bereits in der VM bereitgestellt.

Um einen animierten Unterstrich-Effekt zu erstellen, wenn der Benutzer über den Text fährt, folgen Sie diesen Schritten:

  1. Verwenden Sie display: inline-block, um sicherzustellen, dass der Unterstrich genau die Breite des Textinhalts umfasst.
  2. Verwenden Sie das ::after-Pseudo-Element mit width: 100% und position: absolute, um es unterhalb des Inhalts zu platzieren.
  3. Verwenden Sie transform: scaleX(0), um das Pseudo-Element zunächst zu verstecken.
  4. Verwenden Sie den :hover-Pseudo-Klassen-Selektor, um transform: scaleX(1) anzuwenden und das Pseudo-Element beim Hovern anzuzeigen.
  5. Animieren Sie transform mit transform-origin: left und einem geeigneten transition.
  6. Entfernen Sie die transform-origin-Eigenschaft, um die Transformation von der Mitte des Elements aus zu starten.

Hier ist ein Beispiel-HTML-Code, um den Effekt auf ein Textelement anzuwenden:

<p class="hover-underline-animation">Hover this text to see the effect!</p>

Und hier ist der entsprechende CSS-Code:

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Hover Underline Animation" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.