4 Wege, die Farbe eines Textlinks beim Hovern zu animieren

Lass uns einen reinen CSS-Effekt erstellen, der die Farbe eines Textlinks beim Hovern ändert... aber lass diese neue Farbe hereinrutschen, anstatt sie einfach auszutauschen.

Es gibt vier verschiedene Techniken, die wir anwenden können. Betrachten wir diese unter Berücksichtigung wichtiger Aspekte wie Barrierefreiheit, Leistung und Browserunterstützung.

Legen wir los!

Technik 1: Mit background-clip: text

Zum Zeitpunkt der Erstellung ist die Eigenschaft background-clip: text eine experimentelle Funktion und wird in Internet Explorer 11 und darunter nicht unterstützt.

Diese Technik beinhaltet die Erstellung von Knockout-Text mit einem Harte-Stopp-Verlauf. Das Markup besteht aus einem einzigen HTML-Link (<a>) Element, um einen Hyperlink zu erstellen.

<a href="#">Link Hover</a>

Wir können beginnen, Stile zum Hyperlink hinzuzufügen. Die Verwendung von overflow: hidden wird jeglichen Inhalt außerhalb des Hyperlinks während des Hover-Übergangs abschneiden.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Wir müssen einen linearen Verlauf mit einem harten Stopp bei 50% zur Startfarbe, die der Link haben soll, sowie zur Farbe, zu der er sich ändern wird, verwenden.

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Lassen Sie uns background-clip verwenden, um den Verlauf zu beschneiden, und den Wert text, um den Text anzuzeigen. Wir werden auch die Eigenschaften background-size und background-position verwenden, um die Startfarbe erscheinen zu lassen.

a {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

Schließlich fügen wir die CSS-Eigenschaft transition und die CSS-Pseudoklasse :hover zum Hyperlink hinzu. Damit der Link beim Hovern von links nach rechts gefüllt wird, verwenden Sie die Eigenschaft background-position.

a {
  /* Same as before */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Obwohl diese Technik den Hover-Effekt erzielt, werden Safari und Chrome Textdekorationen und Schatten beschneiden, was bedeutet, dass sie nicht angezeigt werden. Das Anwenden von Textstilen, wie z. B. einer Unterstreichung, mit der CSS-Eigenschaft text-decoration funktioniert nicht. Betrachten Sie vielleicht andere Ansätze bei der Erstellung von Unterstreichungen.

Technik 2: Mit Breite/Höhe

Dies funktioniert, indem ein Data-Attribut verwendet wird, das denselben Text wie der in der <a>-Tag enthält, und die width (füllt den Text von links nach rechts oder rechts nach links) oder height (füllt den Text von oben nach unten oder unten nach oben) von 0 % auf 100 % beim Hovern gesetzt wird.

Hier ist das Markup

<a href="#" data-content="Link Hover">Link Hover</a>

Das CSS ist ähnlich zur vorherigen Technik, abzüglich der Hintergrund-CSS-Eigenschaften. Die text-decoration-Eigenschaft funktioniert hier.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

Dies ist, wenn wir den Inhalt aus dem data-content-Attribut verwenden müssen. Er wird über dem Inhalt im <a>-Tag positioniert. Wir verwenden den netten kleinen Trick, den Text im Datenattribut zu kopieren und ihn über die attr()-Funktion der content-Eigenschaft des ::before-Pseudoelements des Elements anzuzeigen.

a::before {
  position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

Um zu verhindern, dass der Text in die nächste Zeile umbricht, wird white-space: nowrap angewendet. Um die Füllfarbe des Links zu ändern, setzen Sie den Wert für die CSS-Eigenschaft color, indem Sie das ::before-Pseudoelement verwenden und die width bei 0 beginnen lassen.

a::before {
  /* Same as before */
  width: 0;
  white-space: nowrap;
}

Erhöhen Sie die width auf 100 % für das ::before Pseudo-Element, um den Texteffekt beim Hovern abzuschließen.

a:hover::before {
  width: 100%;
}

Obwohl diese Technik den Zweck erfüllt, führen die Eigenschaften width oder height keinen performanten CSS-Übergang durch. Es ist am besten, entweder die Eigenschaften transform oder opacity zu verwenden, um einen flüssigen 60fps-Übergang zu erzielen.

Die Verwendung der CSS-Eigenschaft text-decoration kann zu unterschiedlichen Unterstreichungsstilen im CSS-Übergang führen. Ich habe eine Demo erstellt, die dies mit der nächsten Technik veranschaulicht: der CSS-Eigenschaft clip-path.

Technik 3: Mit clip-path

Für diese Technik verwenden wir die CSS-Eigenschaft clip-path mit einer Polygonform. Das Polygon hat vier Eckpunkte, von denen sich zwei beim Hovern nach rechts ausdehnen.

Das Markup ist dasselbe wie bei der vorherigen Technik. Wir werden wieder ein ::before-Pseudoelement verwenden, aber das CSS ist anders.

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
  transition: clip-path 275ms ease;
}

Im Gegensatz zu den vorherigen Techniken muss text-decoration: underline auf das ::before-Pseudoelement deklariert werden, damit die Farbe die Unterstreichung beim Hovern füllt.

Nun schauen wir uns das CSS für die clip-path-Technik an.

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

Die Eckpunkte des Polygons der clip-path-Eigenschaft sind in Prozent angegeben, um Koordinaten in der Reihenfolge der Auflistung zu definieren.

• 0 0 = oben links
• 0 0 = oben rechts
• 100% 0 = unten rechts
• 0 100% = unten links

Die Richtung des Fülleffekts kann durch Ändern der Koordinaten geändert werden. Jetzt, da wir eine Vorstellung von den Koordinaten haben, können wir das Polygon beim Hovern nach rechts ausdehnen lassen.

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Diese Technik funktioniert ziemlich gut, aber beachten Sie, dass die Unterstützung für die clip-path-Eigenschaft browserübergreifend variiert. Die Erstellung eines CSS-Übergangs mit clip-path ist eine bessere Alternative als die Verwendung der width/height-Technik. Sie beeinflusst jedoch das Rendering des Browsers.

Technik 4: Mit Transform

Das Markup für diese Technik verwendet eine Maskierungsmethode mit einem <span>-Element. Da wir duplizierte Inhalte in einem separaten Element verwenden werden, werden wir aria-hidden="true" verwenden, um die Barrierefreiheit zu verbessern – dies verbirgt es vor Screenreadern, damit der Inhalt nicht zweimal gelesen wird.

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

Das CSS für das <span>-Element enthält einen Übergang, der von links beginnt.

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

Als nächstes müssen wir das <span> so verschieben, dass es wie folgt nach rechts gleitet.

Dazu verwenden wir die CSS-Funktion translateX() und setzen sie auf 0.

a:hover span {
  transform: translateX(0);
}

Dann verwenden wir das ::before-Pseudoelement für das <span>, wieder mit dem data-content-Attribut, das wir zuvor verwendet haben. Wir positionieren es, indem wir es um 100 % entlang der x-Achse verschieben.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

Ähnlich wie beim <span>-Element wird die Position des ::before-Pseudoelements ebenfalls auf translateX(0) gesetzt.

a:hover span::before {
  transform: translateX(0);
}

Obwohl diese Technik die browserübergreifend kompatibelste ist, erfordert sie mehr Markup und CSS, um dorthin zu gelangen. Allerdings ist die Verwendung der CSS-Eigenschaft transform hervorragend für die Leistung, da sie keine Neuberechnungen auslöst und somit flüssige 60fps CSS-Übergänge erzeugt.

Da haben wir es!

Wir haben gerade vier verschiedene Techniken zur Erzielung desselben Effekts betrachtet. Obwohl jede ihre Vor- und Nachteile hat, können Sie sehen, dass es durchaus möglich ist, eine Farbänderung bei Text hereinrutschen zu lassen. Es ist ein netter kleiner Effekt, der Links interaktiver erscheinen lässt.