Cool CSS -Schwebeffekte, die Hintergrundausschnitten, Masken und 3D verwenden

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!