Wie erstelle ich mit CSS einen expandierenden Hover-Effekt für den unteren Rand?

Hover-Effekt: Erweitern des unteren Randes beim Hover

Beim Bestreben, eine visuell ansprechende Website zu erstellen, müssen Sie möglicherweise interaktive Elemente hinzufügen Hover-Effekte für Ihre Elemente. Ein besonderer Effekt, der Ihr Design verbessern kann, ist das Erweitern des unteren Randes beim Hover.

Um diesen Effekt zu erzielen, können Sie die CSS-Eigenschaft transform:scaleX() verwenden. Indem Sie die Eigenschaft „scaleX“ beim Schweben von 0 auf 1 ändern, können Sie die Illusion erzeugen, den unteren Rand zu erweitern.

Hier ist ein Codebeispiel zum Erweitern des unteren Rahmens von der Mitte aus:

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

Wenn Sie jedoch den Rahmen von links oder rechts erweitern möchten, können Sie die Eigenschaft transform-origin wie folgt ändern:

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

Dieser Code erstellt ein Pseudoelement, um den Rahmen und den Übergang anzuwenden und so zu verhindern Der Text selbst wird durch die Umstellung und Beibehaltung der semantischen Struktur Ihres HTML-Codes beeinträchtigt.

Durch die Implementierung dieser Techniken können Sie Ihren Rändern einen dynamischen und optisch ansprechenden Hover-Effekt hinzufügen, der das Benutzererlebnis verbessert und Ihre Website hervorhebt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen expandierenden Hover-Effekt für den unteren Rand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!