Wie erstelle ich eine animierte Erweiterung des unteren Rands beim Schweben?

Hover-Effekt: Animierte Erweiterung des unteren Rands

In dieser Frage besteht das Ziel darin, einen Hover-Effekt zu erzeugen, der den unteren Rand eines Elements beim Schweben erweitert. Um diesen Effekt zu erzielen, können wir die Transformationseigenschaft nutzen und sie beim Hover von 0 auf 1 überführen.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

Dieser Ansatz verwendet ein Pseudoelement, um den Randübergang vom Text zu trennen und so den ursprünglichen HTML-Code beizubehalten Struktur. Die transform-origin-Eigenschaft kann manipuliert werden, um den Rand aus verschiedenen Richtungen zu erweitern, wie unten dargestellt:

<h1>

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine animierte Erweiterung des unteren Rands beim Schweben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!