Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, schlägt vor, mithilfe von reinem CSS einen Mechanismus zum Ändern der Farbe des Linktextes zu erstellen, wenn Sie den Mauszeiger darüber halten. Dies sollte jedoch kein gewöhnlicher Farbwechsel sein. Die neue Farbe sollte den Link von links nach rechts füllen und die alte ersetzen.Zu diesem Zweck können Sie auf eine der vier in diesem Material beschriebenen Methoden zurückgreifen. Berücksichtigen Sie diese Methoden und achten Sie dabei besonders auf verschiedene wichtige Dinge wie die Zugänglichkeit von Inhalten, die Lösungsleistung und die Browserunterstützung.Methode 1: Verwenden von Hintergrund-Clip: Text
Zum Zeitpunkt dieses Schreibens ist die Eigenschaft background-clip: text experimentell. In Internet Explorer 11 und darunter wird dies nicht unterstützt. Bei dieser Methode wird der sogenannte „ Knockout-Text “ (Text, der so aussieht, als wäre er auf einer bestimmten Oberfläche ausgeschnitten und der Hintergrund ist durchscheinend) mit einem scharfen Farbverlauf erstellt . HTML-Markup besteht aus einem einzelnen Element <a>, das einen Hyperlink beschreibt.<a href="#">Link Hover</a>
Beginnen wir mit der Erstellung von Stilen für den Link. Die Verwendung overflow: hiddenführt dazu, dass beim Ändern des Erscheinungsbilds des Links alles abgeschnitten wird, was über den Rahmen dieses Elements hinausgeht.a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
}
Wir müssen einen scharfen linearen Farbverlauf mit einem Wert von 50% für die Start- und Endfarben des Links verwenden.a {
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}
Verwenden Sie die Eigenschaft background-clip, um den Farbverlauf zu kürzen. Geben wir ihm einen Wert textfür die Anzeige von Text. Wir werden die Eigenschaften von background-sizeund verwenden background-position. Dies geschieht, um die Anfangsfarbe anzuzeigen.a {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
}
Fügen Sie schließlich dem Stil eine CSS-Eigenschaft hinzu und formatieren Sie die transitionHyperlink-Pseudoklasse :hover. Verwenden Sie die Eigenschaft, damit die neue Farbe den Link von links nach rechts ausfüllt, wenn Sie mit der Maus über den Link fahren background-position.a {
transition: background-position 275ms ease;
}
a:hover {
background-position: 0 100%;
}
Hier ist ein Beispiel für CodePen: Obwohl Sie mit dieser Technik den gewünschten Effekt erzielen können, haben Safari und Chrome Text- und Schattenelemente zugeschnitten . Dies bedeutet, dass sie nicht angezeigt werden. Das Anwenden von Textstilen, z. B. das Unterstreichen von Text mithilfe der CSS-Eigenschaft text-decoration, funktioniert nicht. Wenn Sie möchten, dass Links unterstrichen werden, sollten Sie daher andere Möglichkeiten in Betracht ziehen, um die Unterstreichung anzupassen .Methode 2: Anwenden von Breite / Höhe
Diese Methode basiert auf der Verwendung des data- * -Attributs , das denselben Text wie das Tag enthält <a>. Hier verwenden Sie die Eigenschaftenverwaltung width(um den Link von links nach rechts oder von rechts nach links mit Farbe zu füllen) oder die Eigenschaft height(um den Effekt von oben nach unten oder von unten nach oben anzuwenden). In unserem Fall wird beispielsweise ein Effekt auf eine Eigenschaft angewendet width, die sich beim Bewegen der Maus über einen Link von 0 auf 100% ändert. Hier ist das Markup:<a href="#" data-content="Link Hover">Link Hover</a>
Das CSS ähnelt dem im vorherigen Beispiel verwendeten, mit Ausnahme der Einstellungen für die Hintergrundeigenschaften. Hier wird die Eigenschaft außerdem gut funktionieren text-decoration:a {
position: relative;
display: inline-block;
font-size: 2em;
color: royalblue;
font-weight: 800;
text-decoration: underline;
overflow: hidden;
}
Hier müssen wir den Text aus dem Attribut verwenden data-content. Dieser Text wird über dem Tag-Inhalt platziert <a>. Wir können hier einen interessanten kleinen Trick anwenden, der darin besteht, Text aus einem Attribut zu kopieren und ihn mithilfe einer Funktion attr()in der Eigenschaft eines contentPseudoelements eines Links abzuleiten ::before.a::before {
position: absolute;
content: attr(data-content);
top: 0;
left: 0;
color: midnightblue;
text-decoration: underline;
overflow: hidden;
transition: width 275ms ease;
}
Damit der Text nicht in eine neue Zeile springt, wird ein Stil auf das Pseudoelement angewendet white-space: nowrap. Um die Farbe des Links zu ändern, legen Sie den Wert der CSS-Eigenschaft des colorPseudoelements fest ::beforeund stellen Sie ihn so ein, dass der Wert der Eigenschaft am Anfang width0 ist:a::before {
width: 0;
white-space: nowrap;
}
Erhöhen Sie den Wert des widthPseudoelements ::beforeauf 100%, um den Effekt anzuwenden, wenn Sie mit der Maus über die Mausverbindung fahren:a:hover::before {
width: 100%;
}
Hier ist ein Beispiel für die Anwendung dieser Methode. Obwohl wir auf die Eigenschaften des Elements einwirken widthund das heighterreichen, was wir brauchen, zeichnet sich diese Methode durch ihre geringe Produktivität aus . Um einen reibungslosen Farbwechsel bei 60 Bildern pro Sekunde zu erzielen, ist es besser, die Eigenschaften transformoder zu verwenden. opacityMit der Eigenschaft text-decorationkönnen Sie verschiedene Stile zum Hervorheben von Text in animierten Links verwenden. Hier ist ein Beispiel, das dies demonstriert und mit der dritten Technik erstellt wurde, die wir nun betrachten werden. Es basiert auf der Verwendung der CSS-Eigenschaft von clip-path .Methode 3: Verwenden des Clip-Pfads
Hier verwenden wir die CSS-Eigenschaft clip-pathund das Polygon, in diesem Fall das Rechteck. Das Rechteck hat vier Ecken, die Länge von zwei Seiten nimmt zu, wenn Sie mit der Maus über den Link fahren. Die Figur dehnt sich aus, eine ihrer Seiten bewegt sich von links nach rechts.Es wird das gleiche Markup wie im vorherigen Beispiel verwendet:<a href="#" data-content="Link Hover">Link Hover</a>
Wir werden wieder das Pseudoelement verwenden ::before. Aber das CSS ist hier 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 zur vorherigen Methode muss hier die Eigenschaft text-decoration: underlinefür das Pseudoelement festgelegt werden ::before. Dies ist notwendig, damit die Farbänderung nicht nur den Text des Links beeinflusst, sondern auch die Zeile, die den Link unterstreicht. Schauen wir uns nun den CSS-Code der Eigenschaft an clip-path:clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
Die Positionen der Eckpunkte des Polygons in der Eigenschaft werden clip-pathals Prozentsatz angegeben. Sie bestimmen die Koordinaten in der Reihenfolge, die ihrer Platzierung auf dem Polygon entspricht:0 0 = obere linke Ecke0 0 = obere rechte Ecke0 100% = untere rechte Ecke0 100% = untere linke Ecke
Die Anwendungsrichtung des Fülleffekts kann durch Ändern der Koordinaten geändert werden. Nachdem wir die Koordinaten kennen, können wir die Figur wachsen lassen, indem wir uns von links nach rechts bewegen, wenn Sie mit der Maus über die Mausverbindung fahren:a:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
Hier ist eine funktionierende Version dieses Beispiels: Diese Technik zum Animieren von Linkfarben funktioniert sehr gut. Bevor Sie sie jedoch verwenden, sollten Sie die Unterstützung der Eigenschaft in clip-pathverschiedenen Browsern in Betracht ziehen . Das Erstellen von CSS-Übergängen mit clip-pathist besser als mit der Höhen- / Breitentechnik. Die Verwendung führt jedoch dazu, dass der Browser sehr ressourcenintensive Malvorgänge (Zeichnen) ausführt .Methode 4: Verwenden der Transformation
Das hier verwendete Markup verwendet die Elementmaskierungstechnik <span>. Da wir <span>Inhalte verwenden, die den Inhalt des Links im Element duplizieren, verwenden wir das Attribut , um die Verfügbarkeit von Inhalten zu verbessern aria-hidden="true". Dadurch werden sich wiederholende Texte vor Bildschirmleseprogrammen ausgeblendet.Ein solcher Text wird nicht zweimal gesprochen:<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>
Das CSS für das Element <span>enthält eine Beschreibung des Übergangs, die links beginnt:span {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
transform: translateX(-100%);
transition: transform 275ms ease;
}
Jetzt müssen Sie die Bewegung des Elements <span>nach rechts wie unten gezeigt organisieren.Verwenden Sie dazu das ::beforeElement Pseudoelement <span>. Und wie zuvor werden wir auf die Verwendung des Attributs zurückgreifen data-content. Lassen Sie uns die Position des Elements ändern, eine Transformation anwenden transform: translateX(100%)und sie entlang der Achse verschieben X.span::before {
display: inline-block;
content: attr(data-content);
color: midnightblue;
transform: translateX(100%);
transition: transform 275ms ease;
text-decoration: underline;
}
Wie beim Element <span>wird die Position des Pseudoelements ::beforemithilfe der folgenden Konstruktion festgelegt transform: translateX(0):a:hover span::before {
transform: translateX(0);
}
Hier ist ein Beispiel für CodePen. Obwohl diese Methode die beste browserübergreifende Unterstützung der oben genannten Methode bietet, benötigt sie mehr HTML und CSS, um sie zu implementieren. Die Verwendung von CSS-Eigenschaften beeinträchtigt transform jedoch nicht die Leistung , die Verwendung bewirkt kein erneutes Zeichnen von Elementen und führt infolgedessen zur Bildung glatter CSS-Übergänge bei 60 Bildern pro Sekunde.Zusammenfassung
Wir haben uns nur vier verschiedene Methoden angesehen, um mit CSS den gleichen Effekt zu erzielen. Obwohl jeder von ihnen seine Vor- und Nachteile hat, können Sie sehen, dass es nicht unmöglich ist, die Animation der Textfarbe der Links zu organisieren, wenn Sie mit der Maus darüber fahren. Dies ist ein kleiner angenehmer Effekt, dessen Verwendung dazu führt, dass Links als interaktiver wahrgenommen werden.Liebe Leser! Animieren Sie Links in Ihren Projekten?