Wie erstelle ich mit CSS einen expandierenden Rahmen beim Hover?

Erweitern des Rahmens beim Hover mit CSS

Sie wünschen sich einen Rahmen, der sich erweitert, wenn die Maus darüber fährt. Hier ist ein alternativer Ansatz, um diesen Effekt zu erzielen:

Mit der CSS-Transformationseigenschaft, insbesondere transform:scaleX(), können Sie das Rahmenelement skalieren.

h1 {
  display: inline-block;
}

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

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

Bei diesem Ansatz haben wir Wenden Sie die Transformations- und Übergangseigenschaften auf ein Pseudoelement (::after) an, um eine Beeinträchtigung des Textinhalts zu vermeiden, und fügen Sie das erforderliche Markup hinzu.

Um den Rand von links oder rechts zu erweitern, passen Sie die Eigenschaft transform-origin an entsprechend:

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

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

Durch Anpassen des Transformationsursprungs können Sie die Richtung der Randerweiterung steuern.

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