Wir haben jetzt eine Reihe von Beitr?gen über interessante Ans?tze für CSS -Schwebeffekte durchlaufen. Wir begannen mit einer Reihe von Beispielen, die CSS-Hintergrundeigenschaften verwenden, und gingen dann zur Eigenschaft von Text-Shadow-Eigenschaften, wo wir technisch keine Schatten verwendeten. Wir haben sie auch mit CSS -Variablen und Calc () kombiniert, um den Code zu optimieren und die Verwaltung einfach zu machen.

In diesem Artikel werden wir diese beiden Artikel aufbauen, um noch komplexere CSS -Schwebeanimationen zu erstellen. Wir sprechen von Hintergrundausschnitten, CSS -Masken und sogar mit 3D -Perspektiven, die unsere Fü?e nass werden. Mit anderen Worten, wir werden diesmal fortgeschrittene Techniken untersuchen und die Grenzen dessen überschreiten, was CSS mit Schwebeffekten tun kann!

Coole Hover Effects -Serie:

1. Coole Schwebeffekte, die Hintergrundeigenschaften verwenden
2. Coole Schwebeffekte, die CSS Textshadow verwenden
3. Coole Schwebeffekte, die Hintergrundausschnitten, Masken und 3D verwenden ( Sie sind hier! )

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

Schwebeffekte mit Hintergrundclip

Sprechen wir über Hintergrundclip. Diese CSS -Eigenschaft akzeptiert einen Textschlüsselwortwert des Textes, mit dem wir Gradienten auf den Text eines Elements anstelle des tats?chlichen Hintergrunds anwenden k?nnen.

So k?nnen wir beispielsweise die Farbe des Textes im Schwebedruck ?ndern, da wir die Farbeigenschaft verwenden würden, aber auf diese Weise animieren wir die Farb?nderung:

Ich habe nur Hintergrund-Clip hinzugefügt: Text zum Element und den übergang der Hintergrundposition. Muss nicht komplizierter sein!

Aber wir k?nnen es besser machen, wenn wir mehrere Gradienten mit unterschiedlichen Hintergrund -Clipping -Werten kombinieren.

In diesem Beispiel verwende ich zwei verschiedene Gradienten und zwei Werte mit Hintergrundclip. Der erste Hintergrundgradient wird in den Text (dank des Textwerts) abgeschnitten, um die Farbe auf dem Schwebedruck festzulegen, w?hrend der zweite Hintergrund-Gradient die untere Unterstimmung (dank des Padding-Box-Werts) erstellt. Alles andere ist gerade aus den Arbeiten, die wir im ersten Artikel dieser Serie geleistet haben.

Wie w?re es mit einem Schwebeffekt, bei dem der Balken von oben nach unten auf eine Weise gleitet, die so aussieht, als ob der Text gescannt und dann gef?rbt ist:

Diesmal habe ich die Gr??e des ersten Gradienten ge?ndert, um die Linie zu erstellen. Dann schiebe ich es mit dem anderen Gradienten, der die Textfarbe aktualisiert, um die Illusion zu erstellen! Sie k?nnen sich visualisieren, was in diesem Stift passiert:

Wir haben nur die Oberfl?che dessen zerkratzt, was wir mit unseren Hintergrundklappkr?ften tun k?nnen! Diese Technik ist jedoch wahrscheinlich etwas, was Sie in der Produktion vermeiden m?chten, da bekannt ist, dass Firefox viele gemeldete Fehler mit dem Hintergrund-Clip hat. Safari hat auch Unterstützungsprobleme. Das l?sst nur Chrom mit soliden Unterstützung für dieses Zeug, also haben Sie es vielleicht offen, w?hrend wir weitermachen.

Gehen wir mit einem Hintergrund-Clip mit einem anderen Schweberffekt fort:

Sie denken wahrscheinlich, dass dieser im Vergleich zu dem, was wir gerade abgedeckt haben, super einfach aussieht - und Sie haben Recht, hier gibt es nichts Besonderes. Alles, was ich mache, ist, einen Gradienten zu schieben und gleichzeitig die Gr??e eines anderen zu erh?hen.

Aber wir sind hier, um uns fortgeschrittene Schwebeffekte anzusehen, oder? Lassen Sie es uns ein wenig ?ndern, damit die Animation anders ist, wenn der Mauszeiger das Element verl?sst. Gleicher Schwebeffekt, aber ein anderes Ende der Animation:

Cool richtig? Lassen Sie uns den Code sezieren:

 .hover {
  --C: #1095c1; / * die Farbe */

  Farbe: #0000;
  Hintergrund: 
    linear-Gradient (90 °, #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;
          Hintergrund-Clip: Text, Padding-Box, Padding-Box;
  übergang: 0s, Farbe .5s, Hintergrundfarbe .5s;
}
.hover: Hover {
  Farbe: #fff;
  --_ C: var (-c);
  --_ P: 100%;
  übergang: 0,5s, Farbe 0S .5s, Hintergrundfarbe 0S .5s;
}

Wir haben drei Hintergrundschichten-zwei Gradienten und die mit der Variablen-C variablen definierte Hintergrundfarbe, die ursprünglich auf transparent eingestellt ist (#0000). Bei schweber ?ndern wir die Farbe in wei? und die Variable-C zur Hauptfarbe (--C).

Hier ist, was bei diesem übergang passiert: Erstens wenden wir einen übergang zu allem an, aber wir verz?gern die Farbe und die Hintergrundfarbe um 0,5s, um den Gleiteffekt zu erzielen. Gleich danach ?ndern wir die Farbe und die Hintergrundfarbe. M?glicherweise bemerken Sie keine visuellen ?nderungen, da der Text bereits wei? ist (dank des ersten Gradienten) und der Hintergrund bereits auf die Hauptfarbe festgelegt ist (dank des zweiten Gradienten).

Anschlie?end wenden wir bei Maus eine sofortige ?nderung auf alles an (beachten Sie die Verz?gerung der 0s), mit Ausnahme der Farbe und der Hintergrundfarbe, die einen übergang haben. Dies bedeutet, dass wir alle Gradienten in ihre Anfangszust?nde zurückbringen. Auch hier werden Sie wahrscheinlich keine visuellen ?nderungen sehen, da sich die Textfarbe und die Hintergrundfarbe bei Schwebung bereits ge?ndert haben.

Zuletzt wenden wir das Verblassen auf Farbe und eine Hintergrundfarbe an, um den Maus-Out-Teil der Animation zu erstellen. Ich wei?, es mag schwierig sein, es zu erfassen, aber Sie k?nnen den Trick besser visualisieren, indem Sie verschiedene Farben verwenden:

Bewegen Sie die oben genannten Male und Sie werden die Eigenschaften sehen, die sich auf Schwebungen animieren, und diejenigen, die sich auf Mouse animieren. Sie k?nnen dann verstehen, wie wir zwei verschiedene Animationen für denselben Schwebeffekt erreicht haben.

Vergessen wir nicht die Trockenschalttechnik, die wir in den vorherigen Artikeln dieser Serie verwendet haben, um die Codemenge zu verringern, indem nur eine Variable für den Switch verwendet wird:

 .hover {
  -C: 16 149 193; / * Die Farbe mit dem RGB -Format *//

  Farbe: RGB (255 255 255 / var (--_ i, 0));
  Hintergrund:
    / * Gradient Nr. 1 */
    linear-Gradient (90 °, #fff 50%, RGB (var (-c)) 0) Calc (100%-var (--_ i, 0) * 100%) / 200%,
    / * Gradient Nr. 2 */
    linear-Gradient (RGB (var (-c)) 0 0) 0% 100% / calc (var (--_ i, 0) * 100%) No-Repeat,
    / * Hintergrundfarbe *//
    rgb (var (-c)/ var (--_ i, 0));
  -Webkit-Background-Clip: Text, Padding-Box, Padding-Box;
          Hintergrund-Clip: Text, Padding-Box, Padding-Box;
  --_ T: Calc (var (--_ i, 0)*. 5s);
  übergang: 
    var (--_ t),
    Farb Calc (.5s-var (--_ t)) var (--_ t),
    Hintergrundfarbe Calc (.5s-var (--_ t)) var (--_ t);
}
.hover: Hover {
  --_ I: 1;
}

Wenn Sie sich fragen, warum ich nach der RGB -Syntax für die Hauptfarbe gegriffen habe, dann, weil ich mit der Alpha -Transparenz spielen musste. Ich verwende auch die Variable --_ T, um eine redundante Berechnung zu reduzieren, die in der übergangseigenschaft verwendet wird.

Bevor wir zum n?chsten Teil wechseln, finden Sie hier weitere Beispiele für Schwebeffekte, die ich vor einiger Zeit gemacht habe und die auf Hintergrundclip angewiesen sind. Es w?re zu lang, um jeden einzelnen zu detaillieren, aber mit dem, was wir bisher gelernt haben, k?nnen Sie den Code leicht verstehen. Es kann eine gute Inspiration sein, einige von ihnen alleine auszuprobieren, ohne den Code zu betrachten.

Ich wei?, ich wei?. Dies sind verrückte und ungew?hnliche Schwebeffekte und ich merke, dass sie in den meisten Situationen zu viel sind. Aber so üben und lernt CSS. Denken Sie daran, dass wir die Grenzen der CSS -Schwebeffekte überschreiten . Der Schwebeffekt mag eine Neuheit sein, aber wir lernen neue Techniken auf dem Weg, die mit Sicherheit für andere Dinge verwendet werden k?nnen.

Schwebeffekte mit CSS -Maske

Erraten Sie, was? Die CSS -Maskeneigenschaft verwendet Gradienten genauso wie die Hintergrundeigenschaft, sodass Sie sehen, dass das, was wir als n?chstes machen, ziemlich einfach ist.

Beginnen wir mit einer schicken Unterstreichung.

Ich verwende Hintergrund, um in dieser Demo einen Zick-Zack-Bodengrenze zu erstellen. Wenn ich eine Animation auf diese Unterstufe anwenden wollte, w?re es langweilig, dies allein mit Hintergrundeigenschaften zu tun.

Geben Sie die CSS -Maske ein.

Der Code mag seltsam aussehen, aber die Logik ist immer noch die gleiche wie bei allen vorherigen Hintergrundanimationen. Die Maske besteht aus zwei Gradienten. Der erste Gradient ist mit einer undurchsichtigen Farbe definiert, die den Inhaltsbereich abdeckt (dank des Inhalts-Box-Werts). Dieser erste Gradient macht den Text sichtbar und verbirgt den unteren Zick-Zack-Rand. Content-Box ist der Masken-Clip-Wert, der den gleichen Hintergrund-Clip verh?lt

 Linear-Gradient (#000 0 0) Inhaltsbox

Der zweite Gradient wird den gesamten Bereich abdecken (dank der Padding-Box). Dieser hat eine Breite, die mit der Variablen -p -Variable definiert ist und auf der linken Seite des Elements platziert wird.

 linear-Gradient (#000 0 0) 0 / var (--_ P, 0%) Polsterkasten

Jetzt müssen wir nur noch den Wert von -_ P auf dem Schwebedruck ?ndern, um einen Gleiteffekt für den zweiten Gradienten zu erzeugen und die Unterstreichung aufzuzeigen.

 .hover: Hover {
  --_ P: 100%;
  Farbe: var (-c);
}

Die folgende Demo verwendet mit den Maskenschichten als Hintergrund, um den Trick besser zu erkennen. Stellen Sie sich vor, die grünen und roten Teile sind die sichtbaren Teile des Elements, w?hrend alles andere transparent ist. Das wird die Maske tun, wenn wir die gleichen Gradienten damit verwenden.

Mit einem solchen Trick k?nnen wir problemlos viel Variation erstellen, indem wir einfach eine andere Gradientenkonfiguration mit der Maskeneigenschaft verwenden:

Jedes Beispiel in dieser Demo verwendet eine etwas andere Gradientenkonfiguration für die Maske. Beachten Sie auch die Trennung im Code zwischen der Hintergrundkonfiguration und der Maskenkonfiguration. Sie k?nnen unabh?ngig verwaltet und gepflegt werden.

?ndern wir die Hintergrundkonfiguration, indem Sie den zig-zack unterstreichen, stattdessen durch eine wellige Unterstreichung:

Eine weitere Sammlung von Schwebeffekten! Ich habe alle Maskenkonfigurationen beibehalten und den Hintergrund ge?ndert, um eine andere Form zu erstellen. Jetzt k?nnen Sie verstehen, wie ich ohne Pseudo-Elemente 400 Schwebeffekte erreichen konnte-und wir k?nnen immer noch mehr haben!

Wie, warum nicht so etwas:

Hier ist eine Herausforderung für Sie: Die Grenze in dieser letzten Demo ist ein Gradient, das die Maskeneigenschaft nutzt, um sie zu enthüllen. K?nnen Sie die Logik hinter der Animation herausfinden? Es mag auf den ersten Blick komplex aussehen, aber es ist super ?hnlich wie die Logik, die wir uns für die meisten anderen Schwebeffekte angesehen haben, die auf Gradienten beruhen. Ver?ffentlichen Sie Ihre Erkl?rung in den Kommentaren!

Schwebeffekte in 3D

Sie m?gen denken, dass es unm?glich ist, einen 3D-Effekt mit einem einzelnen Element zu erzeugen (und ohne auf Pseudoelemente zurückzugreifen!), Aber CSS hat eine M?glichkeit, dies zu erreichen.

Was Sie sehen, gibt es keinen wirklichen 3D-Effekt, sondern eine perfekte Illusion von 3D im 2D-Raum, der den CSS-Hintergrund, den Clip-Pfad und die Transformationseigenschaften kombiniert.

Das erste, was wir tun, ist, unsere Variablen zu definieren:

 --C: #1095c1; /* Farbe */
--B: .1em; / * Randl?nge */
-D: 20px; / * Würfeltiefe */

Anschlie?end erstellen wir einen transparenten Rand mit Breiten, die die obigen Variablen verwenden:

 --_ S: calc (var (-d) var (-b));
Farbe: var (-c);
Grenze: solide #0000; / * Vierter Wert legt das Alpha der Farbe */fest
Randbreite: var (-b) var (-b) var (--_ s) var (--_ s);

Die oberen und rechten Seite des Elements müssen sowohl dem Wert - -B -Wert gleich sind, w?hrend die untere und die linke Seite der Summe von - -B und - -D gleich ist (was die Variable -_ s ist).

Für den zweiten Teil des Tricks müssen wir einen Gradienten definieren, der alle zuvor definierten Grenzbereiche abdeckt. Ein Kegelgradient funktioniert dafür:

 Hintergrund: Conic-Gradient (
  links var (--_ s) unterer var (--_ s),
  #0000 90di, var (-c) 0
 ) 
 0 100% / CALC (100%-var (-b)) CALC (100%-var (-b)) Randbox;

Wir fügen einen weiteren Gradienten für den dritten Teil des Tricks hinzu. In diesem Fall werden zwei halbtransparente wei?e Farbwerte verwendet, die den ersten früheren Gradienten überlappen, um verschiedene Farbt?ne der Hauptfarbe zu erstellen, was uns die Illusion von Schattierungen und Tiefe ergibt.

 konikativer Gradient (
  links var (-d) untere var (-d),
  #0000 90DEG,
  RGB (255 255 255 / 0,3) 0 225de,
  RGB (255 255 255 / 0,6) 0
) Border-Box

Der letzte Schritt besteht darin, einen CSS-Clip-Pfad anzuwenden, um die Ecken für diesen langen Schattengefühl zu schneiden:

 Clip-Pfad: 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 nur zwei Gradienten und einem Clip-Pfad erstellt, den wir mit CSS-Variablen problemlos anpassen k?nnen. Jetzt müssen wir nur noch animieren!

Beachten Sie die Koordinaten aus der vorherigen Abbildung (rot angegeben). Lassen Sie uns diese aktualisieren, um die Animation zu erstellen:

 Clip-Pfad: Polygon (
  0% var (-d), / * kehrt var (-d) 0% * /um
  var (-d) 0%, 
  100% 0%, 
  100% calc (100%-var (-d)), 
  calc (100%-var (-d)) 100%, / * Umkehrt 100% Calc (100%-var (-d)) * / 
  0% 100% / * kehrt var (-d) Calc (100%-var (-d)) * /um
)

Der Trick besteht darin, die unteren und linken Teile des Elements zu verbergen, sodass nur noch ein rechteckiges Element ohne Tiefe ist.

Dieser Stift isoliert den Clip-Path-Teil der Animation, um zu sehen, was er tut:

Die letzte Note besteht darin, das Element mit Translate in die entgegengesetzte Richtung zu bewegen - und die Illusion ist perfekt! Hier ist der Effekt, in dem verschiedene benutzerdefinierte Eigenschaftswerte für unterschiedliche Tiefen verwendet werden:

Der zweite Schwebeffekt folgt der gleichen Struktur. Ich habe nur ein paar Werte aktualisiert, um eine obere linke Bewegung anstelle einer oberen rechten zu erstellen.

Effekte kombinieren!

Das gro?artige an allem, was wir behandelt haben, ist, dass sie sich alle erg?nzen. Hier ist ein Beispiel, in dem ich den Text-Shadow-Effekt aus dem zweiten Artikel in der Serie zur Hintergrundanimationstechnik aus dem ersten Artikel hinzufüge, w?hrend der 3D-Trick verwendet wird, den wir gerade behandelt haben:

Der tats?chliche Code mag zun?chst verwirrend sein, aber gehen Sie ein wenig weiter an - Sie werden feststellen, dass es sich lediglich um eine Kombination dieser drei verschiedenen Effekte handelt, die ziemlich zusammenschreibt.

Lassen Sie mich diesen Artikel mit einem letzten Schwebeffekt beenden, in dem ich Hintergrund, Clip-Pfad und einen Schuss Perspektive kombiniere, um einen weiteren 3D-Effekt zu simulieren:

Ich habe den gleichen Effekt auf Bilder angewendet und das Ergebnis war ziemlich gut für die Simulation von 3D mit einem einzelnen Element:

M?chten Sie genauer ansehen, wie diese letzte Demo funktioniert? Ich habe etwas darüber geschrieben.

Einpacken

Oof, wir sind fertig! Ich wei?, es ist eine Menge kniffliger CSS, aber (1) wir sind auf der richtigen Website für solche Dinge, und (2) das Ziel ist es, unser Verst?ndnis verschiedener CSS -Eigenschaften auf neue Ebenen zu bringen, indem sie miteinander interagieren k?nnen.

M?glicherweise fragen Sie, was der n?chste Schritt von hier aus ist, jetzt, wo wir diese kleine Reihe fortschrittlicher CSS -Schwebeffekte abschlie?en. Ich würde sagen, der n?chste Schritt besteht darin, alles, was wir gelernt haben, auf andere Elemente zu führen, z. B. Schaltfl?chen, Menüelemente, Links usw. Wir haben die Dinge aus genauem Grund auf ein übergangselement auf ein übergangselement einschr?nken. Das eigentliche Element spielt keine Rolle. Nehmen Sie die Konzepte und rennen Sie mit ihnen, um neue Dinge zu erstellen, mit zu experimentieren und zu lernen!

Das obige ist der detaillierte Inhalt vonCool CSS -Schwebeffekte, die Hintergrundausschnitten, Masken und 3D verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!