Wie erstelle ich einen Hover-Effekt mit einem expandierenden unteren Rand?

Unteren Rand bei Hover erweitern

In dieser Frage besteht das Ziel darin, einen Hover-Effekt zu erzeugen, bei dem der untere Rand erweitert wird, wenn der Cursor über dem Element schwebt. Das bereitgestellte Code-Snippet verwendet ein Pseudoelement mit einem Deckkraftübergang, um den Rand beim Schweben sichtbar zu machen.

Lösung:

Um den gewünschten Effekt zu erzielen, können wir die CSS-Transformation verwenden :scaleX(), um den Rand und nicht die Deckkraft zu erweitern. So funktioniert es:

1. Erstellen Sie ein Pseudoelement mit einem unteren Rand:

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

2. Wenden Sie eine scaleX()-Transformation mit einem Übergang an :

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

3. Erweitern Sie den Rahmen beim Hover, indem Sie ScaleX auf setzen 1:

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

Modifikation für Erweiterungsrichtung:

Zusätzlich können wir die Richtung der Grenzerweiterung steuern, indem wir die Transformation anpassen. Ursprungseigenschaft des Pseudoelements:

1. Zur Erweiterung aus dem Mitte:

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

2. Um von rechts zu erweitern:

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

3. Um von links zu erweitern:

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

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