Wie kann ich mit CSS eine von links nach rechts animierende Unterstreichung erstellen und diese beim Schweben umkehren?

Unterstreichungen animieren: Von links nach rechts

Die Herausforderung bei der Replikation des Übergangseffekts von uber.design besteht darin, den Übergang beim Schweben umzukehren. Während das bereitgestellte CSS die Unterstreichung von links nach rechts animieren kann, fehlt ihm die Möglichkeit, die Animation umzukehren.

Um den gewünschten Effekt zu erzielen, können wir eine Kombination aus Verlaufs- und Hintergrundpositionierung nutzen. Indem wir einen linearen Farbverlauf auf das Element anwenden und die Hintergrundposition mit einer Verzögerung anpassen, können wir die Illusion erzeugen, dass sich die Unterstreichung von links nach rechts ausdehnt.

Hier ist das überarbeitete CSS:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

Dieser Code erstellt einen linearen Farbverlauf auf dem Element, zunächst unten links positioniert (0 % 100 %). Beim Schweben ändert sich die Hintergrundposition nach rechts unten (100 % 100 %), wodurch der Farbverlauf die Breite des Elements vergrößert und den Effekt einer Unterstreichung erzeugt, die sich von links nach rechts bewegt.

Okay - Optimieren Sie die Animation und passen Sie die Werte für Hintergrundgröße und Übergangsdauer an Ihren gewünschten Effekt an.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS eine von links nach rechts animierende Unterstreichung erstellen und diese beim Schweben umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!