Coole CSS-Hover-Effekte, die Hintergrundausschnitte, Masken und 3D verwenden

Wir haben jetzt eine Reihe von Beiträgen über interessante Ansätze für CSS-Hover-Effekte durchgesehen. Wir begannen mit einem Reihe von Beispielen, die CSS verwenden background immobilien, ging dann weiter zum text-shadow Eigentum wo Wir haben technisch gesehen keine Schatten verwendet. Wir haben sie auch mit CSS-Variablen und kombiniert calc() um den Code zu optimieren und die Verwaltung zu vereinfachen.

In diesem Artikel bauen wir auf diesen beiden Artikeln auf, um noch komplexere CSS-Hover-Animationen zu erstellen. Wir sprechen über Hintergrundbeschneidung, CSS-Masken und sogar über 3D-Perspektiven. Mit anderen Worten, wir werden dieses Mal fortgeschrittene Techniken erforschen und die Grenzen dessen erweitern, was CSS mit Hover-Effekten tun kann!

---

Hier ist nur ein Vorgeschmack auf das, was wir machen:

Hover-Effekte verwenden background-clip

Lass uns reden über background-clip. Diese CSS-Eigenschaft akzeptiert a text Keyword-Wert Dadurch können wir Farbverläufe auf die anwenden Text eines Elements statt des eigentlichen Hintergrund.

So können wir zum Beispiel die Farbe des Textes beim Hover ändern, wie wir es mit dem tun würden color -Eigenschaft, aber auf diese Weise animieren wir den Farbwechsel:

Ich habe nur hinzugefügt background-clip: text zum Element und transition background-position. Komplizierter muss es nicht sein!

Aber wir können es besser machen, wenn wir mehrere Farbverläufe mit unterschiedlichen Hintergrund-Clipping-Werten kombinieren.

In diesem Beispiel verwende ich zwei verschiedene Farbverläufe und zwei Werte mit background-clip. Der erste Hintergrundverlauf wird auf den Text zugeschnitten (dank der text Wert), um die Farbe beim Hover festzulegen, während der zweite Hintergrundverlauf die untere Unterstreichung erzeugt (dank der padding-box Wert). Alles andere wird direkt nach oben kopiert die Arbeit, die wir im ersten Artikel gemacht haben dieser Serie.

Wie wäre es mit einem Hover-Effekt, bei dem die Leiste so von oben nach unten gleitet, als ob der Text gescannt und dann eingefärbt wird:

Dieses Mal habe ich die Größe des ersten Farbverlaufs geändert, um die Linie zu erstellen. Dann schiebe ich es mit dem anderen Farbverlauf, der die Textfarbe aktualisiert, um die Illusion zu erzeugen! Sie können sich vorstellen, was in diesem Stift passiert:

Wir haben nur an der Oberfläche dessen gekratzt, was wir mit unserem tun können background-clipPing-Kräfte! Diese Technik ist jedoch wahrscheinlich etwas, das Sie in der Produktion vermeiden möchten, da Firefox bekanntermaßen über eine verfügt viele gemeldete Fehler Ähnliche background-clip. Safari hat auch Support-Probleme. Damit bleibt nur Chrome mit solider Unterstützung für dieses Zeug, also lassen Sie es vielleicht offen, wenn wir fortfahren.

Kommen wir zu einem anderen Hover-Effekt mit background-clip:

Sie denken wahrscheinlich, dass dies im Vergleich zu dem, was wir gerade behandelt haben, super einfach aussieht – und Sie haben Recht, hier gibt es nichts Besonderes. Alles, was ich tue, ist, einen Farbverlauf zu verschieben, während ich die Größe eines anderen erhöhe.

Aber wir sind hier, um uns fortgeschrittene Hover-Effekte anzusehen, richtig? Ändern wir es ein wenig, damit die Animation anders ist, wenn der Mauszeiger das Element verlässt. Gleicher Hover-Effekt, aber anderes Ende der Animation:

Cool oder? Lassen Sie uns den Code analysieren:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Wir haben drei Hintergrundebenen – zwei Farbverläufe und die background-color definiert mit --_c Variable, die anfänglich auf transparent gesetzt ist (#0000). Beim Schweben ändern wir die Farbe in Weiß und die --_c variabel zur Hauptfarbe (--c).

Hier ist, was darauf passiert transition: Zuerst wenden wir einen Übergang auf alles an, aber wir verzögern den color und background-color by 0.5s um den Gleiteffekt zu erzeugen. Gleich danach ändern wir die color und dem background-color. Möglicherweise bemerken Sie keine visuellen Änderungen, da der Text bereits weiß ist (dank des ersten Farbverlaufs) und der Hintergrund bereits auf die Hauptfarbe eingestellt ist (dank des zweiten Farbverlaufs).

Dann wenden wir beim Loslassen der Maus eine sofortige Änderung auf alles an (beachten Sie die 0s Verzögerung), mit Ausnahme der color und background-color die einen Übergang haben. Das bedeutet, dass wir alle Farbverläufe in ihren Anfangszustand zurückversetzen. Auch hier werden Sie wahrscheinlich keine visuellen Änderungen sehen, da der Text color und background-color bereits beim Hover geändert.

Zuletzt wenden wir das Verblassen auf Farbe und a an background-color um den Mouse-Out-Teil der Animation zu erstellen. Ich weiß, es mag schwierig zu verstehen sein, aber Sie können den Trick besser visualisieren, indem Sie verschiedene Farben verwenden:

Bewegen Sie den Mauszeiger oft darüber und Sie werden die Eigenschaften sehen, die beim Schweben animiert werden, und diejenigen, die beim Verlassen der Maus animiert werden. Sie können dann verstehen, wie wir zwei verschiedene Animationen für denselben Hover-Effekt erreicht haben.

Lass es uns nicht vergessen die von uns verwendete DRY-Switching-Technik in den vorherigen Artikeln dieser Serie, um die Codemenge zu reduzieren, indem nur eine Variable für den Schalter verwendet wird:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Wenn Sie sich fragen, warum ich für die Hauptfarbe nach der RGB-Syntax gegriffen habe, liegt das daran, dass ich mit der Alpha-Transparenz spielen musste. Ich verwende auch die Variable --_t um eine redundante Berechnung zu reduzieren, die in der verwendet wird transition Eigentum.

Bevor wir zum nächsten Teil übergehen, hier sind weitere Beispiele für Hover-Effekte, die ich vor einiger Zeit gemacht habe und auf die ich mich verlassen kann background-clip. Es würde zu lange dauern, jeden einzelnen zu beschreiben, aber mit dem, was wir bisher gelernt haben, können Sie den Code leicht verstehen. Es kann eine gute Inspiration sein, einige davon alleine auszuprobieren, ohne sich den Code anzusehen.

Ich weiß, ich weiß. Das sind verrückte und ungewöhnliche Hover-Effekte, und ich weiß, dass sie in den meisten Situationen zu viel sind. Aber so übt und lernt man CSS. Denken Sie daran, wir die Grenzen ausreizen von CSS-Hover-Effekten. Der Hover-Effekt mag eine Neuheit sein, aber wir lernen auf dem Weg dorthin neue Techniken, die sicherlich für andere Dinge verwendet werden können.

Hover-Effekte mit CSS mask

Erraten Sie, was? Das CSS mask -Eigenschaft verwendet Farbverläufe auf die gleiche Weise wie die background Eigenschaft tut, also werden Sie sehen, dass das, was wir als nächstes machen, ziemlich einfach ist.

Beginnen wir mit dem Erstellen einer ausgefallenen Unterstreichung.

Ich benutze background um in dieser Demo einen unteren Zick-Zack-Rahmen zu erstellen. Wenn ich eine Animation auf diese Unterstreichung anwenden wollte, wäre es mühsam, dies nur mit Hintergrundeigenschaften zu tun.

Geben Sie CSS ein mask.

Der Code mag seltsam aussehen, aber die Logik ist immer noch die gleiche wie bei allen vorherigen Hintergrundanimationen. Das mask setzt sich aus zwei Steigungen zusammen. Der erste Farbverlauf wird mit einer undurchsichtigen Farbe definiert, die den Inhaltsbereich abdeckt (dank der content-box Wert). Dieser erste Farbverlauf macht den Text sichtbar und blendet den unteren Zickzack-Rand aus. content-box lernen muss die mask-clip Wert, der sich genauso verhält wie background-clip

linear-gradient(#000 0 0) content-box

Der zweite Verlauf deckt den gesamten Bereich ab (danke an padding-box). Dieser hat eine Breite, die mit definiert wird --_p Variable, und es wird auf der linken Seite des Elements platziert.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Jetzt müssen wir nur noch den Wert von ändern --_p Bewegen Sie den Mauszeiger, um einen Gleiteffekt für den zweiten Farbverlauf zu erzeugen und die Unterstreichung anzuzeigen.

.hover:hover { --_p: 100%; color: var(--c);
}

Die folgende Demo verwendet die Maskenebenen als Hintergründe, um den stattfindenden Trick besser zu sehen. Stellen Sie sich vor, dass die grünen und roten Teile die sichtbaren Teile des Elements sind, während alles andere transparent ist. Das macht die Maske, wenn wir dieselben Farbverläufe verwenden.

Mit einem solchen Trick können wir ganz einfach viele Variationen erzeugen, indem wir einfach eine andere Verlaufskonfiguration mit dem verwenden mask Eigentum:

Jedes Beispiel in dieser Demo verwendet eine etwas andere Verlaufskonfiguration für die mask. Beachten Sie auch die Trennung im Code zwischen der Hintergrundkonfiguration und der Maskenkonfiguration. Sie können unabhängig voneinander verwaltet und gewartet werden.

Ändern wir die Hintergrundkonfiguration, indem wir stattdessen die Zick-Zack-Unterstreichung durch eine wellenförmige Unterstreichung ersetzen:

Eine weitere Sammlung von Hover-Effekten! Ich habe alle Maskenkonfigurationen beibehalten und den Hintergrund geändert, um eine andere Form zu erstellen. Jetzt können Sie verstehen, wie ich dazu in der Lage war um 400 Hover-Effekte zu erreichen ohne Pseudoelemente — und wir können noch mehr!

Warum nicht so etwas:

Hier ist eine Herausforderung für Sie: Die Grenze in dieser letzten Demo ist ein Farbverlauf mit der mask Eigenschaft, es zu offenbaren. Kannst du die Logik hinter der Animation herausfinden? Es mag auf den ersten Blick komplex aussehen, aber es ist der Logik sehr ähnlich, die wir uns für die meisten anderen Hover-Effekte angesehen haben, die auf Farbverläufen basieren. Poste deine Erklärung in die Kommentare!

Hover-Effekte in 3D

Sie denken vielleicht, dass es unmöglich ist, einen 3D-Effekt mit einem einzigen Element zu erzeugen (und ohne auf Pseudo-Elemente zurückzugreifen!), aber CSS hat eine Möglichkeit, dies zu erreichen.

Was Sie dort sehen, ist kein echter 3D-Effekt, sondern eher eine perfekte Illusion von 3D im 2D-Raum, der das CSS kombiniert background, clip-path und transform Eigenschaften.

Als erstes definieren wir unsere Variablen:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Dann erstellen wir einen transparenten Rahmen mit Breiten, die die obigen Variablen verwenden:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Die obere und die rechte Seite des Elements müssen beide gleich sein --b Wert, während die untere und die linke Seite gleich der Summe von sein müssen --b und --d (welches ist das --_s Variable).

Für den zweiten Teil des Tricks müssen wir einen Farbverlauf definieren, der alle zuvor definierten Grenzbereiche abdeckt. EIN conic-gradient wird dafür arbeiten:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Für den dritten Teil des Tricks fügen wir einen weiteren Farbverlauf hinzu. Dieser verwendet zwei halbtransparente weiße Farbwerte, die den ersten vorherigen Farbverlauf überlappen, um verschiedene Schattierungen der Hauptfarbe zu erzeugen, wodurch wir die Illusion von Schattierung und Tiefe erhalten.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Der letzte Schritt ist die Anwendung a CSS clip-path um die Ecken für dieses lange Schattengefühl zu schneiden:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Das ist alles! Wir haben gerade ein 3D-Rechteck mit nichts als zwei Farbverläufen und einem erstellt clip-path die wir einfach mit CSS-Variablen anpassen können. Jetzt müssen wir es nur noch animieren!

Beachten Sie die Koordinaten aus der vorherigen Abbildung (rot markiert). Aktualisieren wir diese, um die Animation zu erstellen:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Der Trick besteht darin, den unteren und den linken Teil des Elements auszublenden, sodass nur noch ein rechteckiges Element ohne jegliche Tiefe übrig bleibt.

Dieser Stift isoliert die clip-path Teil der Animation, um zu sehen, was es tut:

Der letzte Schliff besteht darin, das Element mit in die entgegengesetzte Richtung zu bewegen translate — und die Illusion ist perfekt! Hier ist der Effekt mit verschiedenen benutzerdefinierten Eigenschaftswerten für unterschiedliche Tiefen:

Der zweite Hover-Effekt folgt der gleichen Struktur. Alles, was ich getan habe, ist, ein paar Werte zu aktualisieren, um eine Bewegung oben links statt oben rechts zu erstellen.

Effekte kombinieren!

Das Tolle an allem, was wir behandelt haben, ist, dass sie sich alle ergänzen. Hier ist ein Beispiel, wo ich hinzufüge text-shadow Wirkung ab dem zweiten Artikel in der Serie zum background Animationstechnik aus dem ersten Artikel während Sie den 3D-Trick verwenden, den wir gerade behandelt haben:

Der eigentliche Code mag zunächst verwirrend sein, aber gehen Sie weiter und analysieren Sie ihn ein wenig weiter – Sie werden feststellen, dass es sich lediglich um eine Kombination dieser drei verschiedenen Effekte handelt, die ziemlich zusammengequetscht sind.

Lassen Sie mich diesen Artikel mit einem letzten Hover-Effekt beenden, bei dem ich Hintergrund, Clip-Pfad und einen Hauch von kombiniere perspective um einen anderen 3D-Effekt zu simulieren:

Ich habe den gleichen Effekt auf Bilder angewendet und das Ergebnis war ziemlich gut, um 3D mit einem einzigen Element zu simulieren:

Möchten Sie sich genauer ansehen, wie diese letzte Demo funktioniert? Ich habe etwas dazu geschrieben.

Wrapping up

Uff, wir sind fertig! Ich weiß, es ist eine Menge kniffliges CSS, aber (1) wir sind auf der richtigen Website für so etwas, und (2) das Ziel ist es, unser Verständnis verschiedener CSS-Eigenschaften auf eine neue Ebene zu heben, indem wir ihnen die Interaktion ermöglichen einander.

Sie fragen sich vielleicht, was der nächste Schritt von hier aus ist, jetzt, wo wir diese kleine Serie fortgeschrittener CSS-Hover-Effekte abschließen. Ich würde sagen, der nächste Schritt besteht darin, alles, was wir gelernt haben, auf andere Elemente wie Schaltflächen, Menüpunkte, Links usw. anzuwenden. Wir haben die Dinge ziemlich einfach gehalten, indem wir unsere Tricks aus genau diesem Grund auf ein Überschriftenelement beschränkt haben ; das eigentliche Element spielt keine Rolle. Nehmen Sie die Konzepte und laufen Sie mit ihnen, um neue Dinge zu erstellen, zu experimentieren und zu lernen!

---

Coole CSS-Hover-Effekte, die Hintergrundausschnitte, Masken und 3D verwenden ursprünglich veröffentlicht am CSS-Tricks.. Du solltest erhalten Sie den Newsletter.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://css-tricks.com/css-hover-effects-background-masks-3d/