Ein Designer, mit dem ich zusammenarbeite, präsentierte kürzlich auf einem Teammeeting Kompositionen. Sie hatte großartige Arbeit geleistet, das Konzept für ein Designsystem zusammenzustellen, von Komponenten bis hin zu Mustern und allem dazwischen, was jeden Front-End-Entwickler glücklich machen würde.
Aber ein winzig kleines Detail in ihrer Arbeit fiel mir ins Auge: Der Hover-Zustand für Links war eine wellige Linie.
Huh! Nicht nur, dass ich das noch nie gesehen hatte, die Idee war mir noch nie in den Sinn gekommen. Es stellt sich heraus, dass es davon viele Instanzen auf Live-Seiten gibt, eine davon ist The Outline. Das war die Implementierung, die das Design inspirierte.
Cool, dachte ich. Wir können etwas wie einen linearen Hintergrundverlauf oder sogar ein Hintergrundbild machen. Aber! Das war noch nicht das Ende des Designs. Es stellt sich heraus, dass es auch animiert ist. Wieder von The Outline.
Wow! Das ist ziemlich wild. Ich war mir ehrlich gesagt nicht sicher, wie ich das angehen sollte, denn die Animation meiner ersten Ideen wäre schwierig gewesen, besonders für die Cross-Browser-Unterstützung.
Also, wie hat The Outline das gemacht? Es stellt sich heraus, es ist SVG. Wir können einen welligen Pfad erstellen und ihn ziemlich einfach animieren.
Siehe den Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Aber wie funktioniert das mit einem Link? Nun, wir *können* SVG in der Eigenschaft background-image verwenden.
Siehe den Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Aber das ist ziemlich schlecht, weil wir das nicht wirklich animieren können. Wir brauchen bessere Werte dafür. Wir *können* jedoch CSS direkt in das SVG in der Eigenschaft background-image einbetten. Wir können den SVG-Code nicht einfach kopieren und in die Eigenschaft einfügen, aber mit richtiger Kodierung geht das.
Siehe den Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Und da SVG seine eigenen Stile innerhalb des Markups enthalten kann, kann die Animation direkt dort in der Eigenschaft background-image platziert werden, genauso wie wir es mit CSS im Kopfbereich eines HTML-Dokuments oder mit Inline-CSS in HTML tun würden.
Siehe den Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Wir können es, wenn wir wollen, etwas anders gestalten.
Siehe den Pen Link Effectz – Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Das inspiriert!
Ich habe keine Ahnung, ob eine animierte wellige Linie eine gute Benutzererfahrung darstellt, und ehrlich gesagt, das ist nicht der Sinn dieses Beitrags. Der Sinn ist, dass The Outline eine lustige Idee mit einer schlanken CSS-Implementierung hatte.
Das brachte mich zum Nachdenken über andere nicht standardmäßige (vielleicht sogar unkonventionelle) Hover-Stylings, die wir mit Links machen können. Wieder, die Benutzerfreundlichkeit beiseite lassend und eine großartige Zeit mit CSS haben...
Der Effekt von Rand zu Hintergrund
Vielleicht kann derselbe untere Rand des Standardlinks wachsen und beim Hovern zum vollen Hintergrund des Links werden.
Siehe den Pen Link Effectz – Hintergrund beim Hovern von Geoff Graham (@geoffgraham) auf CodePen.
Sogar können wir etwas Ähnliches horizontal tun.
Siehe den Pen Link Effectz – Horizontaler Hintergrund von Geoff Graham (@geoffgraham) auf CodePen.
Der Effekt von umrandetem Text
Lassen Sie uns die Schriftfarbe entfernen und eine Umrandung dahinterlassen.
Siehe den Pen Link Effectz – Umrandung beim Hovern von Geoff Graham (@geoffgraham) auf CodePen.
Der Effekt von erhabenem Text
Eine weitere Idee ist, den Text so zu gestalten, als würde er beim Hovern aus der Seite herauswachsen.
Siehe den Pen Link Effectz – Erhabener Text beim Hovern von Geoff Graham (@geoffgraham) auf CodePen.
Der Font-Swapper-oo-Effekt
Das ist so unpraktisch, dass es mich zum Lachen bringt, aber warum nicht.
Siehe den Pen Link Effectz – Schriftart beim Hovern wechseln von Geoff Graham (@geoffgraham) auf CodePen.
Der „Mach lauter, Chris“-Effekt
Entschuldige, Chris. Du weißt, dass du es liebst. ❤️
Siehe den Pen Link Effectz – Mach lauter, Chris! von Geoff Graham (@geoffgraham) auf CodePen.
Was kannst du dir ausdenken?
Hast du Ideen? Lass es mich in den Kommentaren wissen und ich werde sie in die CodePen-Sammlung aufnehmen, die ich begonnen habe.
Der „Mach lauter, Chris“-Effekt ist der beste und du solltest sofort alle Links auf dieser Seite darauf umstellen.
Oooo, ich mag dieses Beispiel von Rand zu Hintergrund. Ich habe immer nur langweilige Farb- oder Unterstreichungsänderungen bei Hover/Fokus gemacht, das muss ich mal ausprobieren :)
Ich habe auch über die wellige Linie geschrieben, ungefähr zur Zeit, als The Outline gestartet wurde.
Du solltest es dir unbedingt ansehen.
Hallo Geoff,
Im „Mach lauter, Chris“-Effekt kann die Breite des Hintergrundbilds eine px-Einheit sein, um die volle Breite zu reduzieren und das Verschwinden des Hoves für Geräte mit geringer Höhe (Handys im Querformat) zu ermöglichen.
Eine andere Option ist, anstelle eines Hintergrundbilds ein Bild zu verwenden, das auch in IE11 (für Windows-7-Benutzer) einfach zu verwenden ist.
Siehe dieses Alternative: clba.nl/experiments/another-link-hover-effect.htm
OMG WTH! Sehr schöner Hover-Effekt mit Animation, den ich zum ersten Mal gesehen habe!
Werde ich sicher auf meiner Seite verwenden :)
Ich suche nach weiteren Ideen...
Hallo Geoff, danke für diesen großartigen Artikel. Allein beim Lesen habe ich von der großartigen Möglichkeit erfahren, SVG über CSS zu animieren und habe die wahre Bedeutung der UTF-28-kodierten Zeichen „%3C … %3E“ erkannt. Gibt es also einen Grund und eine Möglichkeit, zum Beispiel SVG-Tags wie „desk“, „title“ und „use“ auf ähnliche Weise in CSS zu verwenden?
Nun, ich habe festgestellt, dass es auch besser wäre, die `background-size` beim Hover-Zustand von `auto` auf 20px zu ändern, da es den oberen und unteren Teil der welligen Linie abschneidet und ihn während der Animation einrahmt. 20px hier ist gleich groß wie die `viewBox` des SVG.
Hallo Oksana! Gute Frage. Ich kann mir keinen Grund vorstellen, diese Attribute hinzuzufügen, aber ich denke, es kann nicht schaden! Obwohl dieses Beispiel mich an die Verwendung des `text`-Tags denken ließ, um Inhalte als Alternative zur `content`-Eigenschaft in ein Div zu bekommen.
Fantastisch! Aber was ist mit dem Handy?
Die meisten mobilen Browser ignorieren Hover-Effekte oder aktivieren sie beim Berühren, je nach Verhalten des Links. Ich würde nicht erwarten, dass sich eines dieser Experimente (oder viele andere Hover-Effekte) gut auf Mobilgeräten umsetzen lässt.
Das gesagt, erinnere ich mich daran, dass Samsung vor einigen Jahren etwas getan hat, das Hover-Effekte ermöglichte, wenn man tatsächlich mit dem Finger über ein Objekt fuhr.
CSS ist immer noch sehr mächtig und viele Entwickler haben einzigartige Wege gefunden, um mit CSS Wunder zu vollbringen. Die meisten von uns dachten, dass es eine alte Sprache für die erweiterte Formatierung einer Website ist, aber immer noch haben einige Entwickler bewiesen, dass sie falsch liegen.
Wie wäre es mit hüpfenden Buchstaben? Mit einigen CSS-Animationen wäre das cool.
Toastie! Der alte MK-Spiel-Effekt ist großartig http://rubentd.com/img/toasty.png
Großartige Ausarbeitung! Ich war tatsächlich der Autor des Wellen-Codes von The Outline. Ich denke, die Art und Weise, wie du den Code zerlegt hast, ist ziemlich treffend. Die Idee dieser Methode entstand aus einigen der Anforderungen, die ich für das, was wir tun mussten, aufstellte. Wir wollten, dass die wellige Linie in der Lage ist,
Text über 2 Zeilen unterstreichen
beim Hovern animieren
Text unterschiedlicher Größe unterstreichen
in jeder Farbe sein können
SVG ermöglicht dynamische Größenänderung und Farbe. Es als `background-image` zu verwenden, ermöglicht mehrzeilige wellige Linien. Was den CSS-Übergang betrifft, der in das SVG integriert war, war das ziemlich experimentell. Es hat ziemlich gut funktioniert, und so haben wir die Lösung, mit der wir das gemacht haben.
Verdammt ja, das ist toller Kontext! Danke fürs Teilen – und wirklich gute Arbeit. :)
Du könntest das Hintergrundbild im zweiten Beispiel animieren, indem du den Wert von `background-position` animierst. So.
Schöne und inspirierende Beispiele! Aber… wäre es nicht besser, `-webkit-text-fill-color: transparent` anstelle von `color: transparent` im Beispiel für umrandeten Text zu verwenden und das einfache `color` als zuverlässigen Fallback beizubehalten? Was nützt es, Text für *alle* unsichtbar zu machen, einschließlich Browsern, die keine nicht standardmäßigen (wenn auch in der sogenannten „Kompatibilitätsstandard“ von WHATWG enthaltenen) Dekorationsmöglichkeiten unterstützen?
Ja, auf jeden Fall! Das wäre definitiv der beste Weg, wenn man dieses Beispiel in der Produktion verwenden möchte.
Die Version in diesem Beitrag hat zwar einen Fallback für Browser, die `outline` nicht unterstützen, aber vielleicht könnte dieser bedingte Block auch den Wechsel der Farbe zu etwas besser Unterstütztem beinhalten.
Leider hat der Code im `@support not(...) {}`-Block keine Wirkung in Browsern, die `@support` selbst nicht unterstützen, aber ein bedingungsloses `color: transparent` funktioniert fast überall:)
Liebe es – ich wünschte, ich könnte es zu meiner Seite auf Wix hinzufügen…
Du hast Recht, Geoff, die meisten SVG-Attribute funktionieren in URL-Daten, nur die richtige Syntax ist nötig und es ist etwas unübersichtlich zu pflegen. Es gibt zwei Beispieldateien mit angewandten `desc`, `g`, `use`, `text`, `textPath`. Ich behaupte nicht, dass sie korrekte Animationseffekte für Links sind, es ist eher meine CSS-SVG-Fallstudie.
Eins
Zwei
Wenn wir den Font-Swap-Effekt mit –
ändern und Poppins anstelle von Creepster einfügen, ist es ein anständiger und interessanter Effekt.