Im vorherigen Artikel haben wir diskutiert, wie CSS -Hintergrundeigenschaften verwendet werden, um coole Schwebeffekte zu erzeugen. Dieses Mal konzentrieren wir uns auf das CSS- text-shadow Eigentum und untersuchen interessantere Schwebeffekte. Sie fragen sich vielleicht, wie das Hinzufügen von Schatten zu Text einen coolen Effekt haben kann, aber der Punkt ist: Wir erstellen keine Schatten für diese Text -Schwebeffekte.

Cool Hover Effect -Serie:

1. Verwenden Sie Hintergrundeigenschaften, um einen coolen Schwebeffekt zu erzielen
2. Verwenden Sie CSS -Textschatten, um einen coolen Schwebeffekt zu erzielen (Ihr aktueller Standort!)
3. Verwenden Sie Hintergrundanbaus, Maskierung und 3D, um coole Schwebeffekte zu erzielen

text-shadow , aber kein Textschatten?

Lassen Sie mich Verwirrung durch den Schwebeffekt entfernen, den wir in der folgenden Demo aufbauen werden:

Ohne den Code zu betrachten, werden viele von Ihnen intuitiv denken, dass wir für jeden Schwebeffekt den Text kopieren und ihn unabh?ngig voneinander animieren. Wenn Sie sich den Code ansehen, werden Sie feststellen, dass kein Text in der HTML kopiert wird. Haben Sie festgestellt content: "text" nicht in CSS verwendet wird?

Textschichten werden ausschlie?lich mit text-shadow erstellt!

Schwebeffekt #1

Lassen Sie uns den CSS -Code aufschlüsseln:

 .hover-1 {
  Zeilenh?he: 1.2EM;
  Farbe: #0000;
  Textschatten: 
    0 0 #000, 
    0 1.2EM #1095C1;
  überlauf: versteckt;
  übergang: .3s;
}
.hover-1: Hover {
  Textschatten: 
    0 -1.2em #000, 
    0 0 #1095C1;
}

Das erste, was zu beachten ist, ist, dass ich die Farbe des tats?chlichen Textes für transparent setze (mit #0000 ), um den tats?chlichen Text auszublenden. Danach verwende ich text-shadow , um zwei Schatten zu erstellen, von denen jede nur zwei L?ngenwerte definiert. Dies bedeutet, dass es keinen Unsch?rfenradius gibt, was zu einem klaren und scharfen Schatten führt, der effektiv eine Kopie des Textes mit der angegebenen Farbe erzeugt.

Deshalb habe ich in der Einführung behauptet, dass es hier keinen Schatten gibt. Was wir tun, ist nicht so sehr ein ?klassischer“ Schatten, um Text zu kopieren.

Wir haben zwei Textschichten, die wir beim Schweben bewegen. Wenn wir den überlauf ausblenden, ist der doppelte Text unsichtbar und bewegt ihn so aus, als ob der tats?chliche Text durch einen anderen Text ersetzt wurde. Dies ist der Haupttrick, um alle Beispiele in diesem Artikel ordnungsgem?? funktionieren zu lassen.

Lassen Sie uns den Code optimieren. Ich habe den Wert 1.2em mehrmals verwendet, um die H?he und den Offset des Schattens zu definieren, was ihn zu einem idealen Kandidaten für CSS -benutzerdefinierte Eigenschaften macht (wir nennen es --h ):

 .hover-1 {
  --H: 1.2EM;

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 0 #000, 
    0 var (-h) #1095c1;
  überlauf: versteckt;
  übergang: .3s;
}
.hover-1: Hover {
  Textschatten: 
    0 calc (-1 * var (-h)) #000, 
    0 0 #1095C1;
}

Wir k?nnen den Code auch mit mehr calc() -Rechnungen weiter vereinfachen, damit wir nur einmal text-shadow verwenden. (Wir haben das Gleiche im vorherigen Beitrag gemacht.)

 .hover-1 {
  --H: 1.2EM;   

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 calc (-1*var (--_ t, 0em)) #000,, 
    0 calc (var (-h)-var (--_ t, 0em)) #1095c1;
  überlauf: versteckt;
  übergang: .3s;
}
.hover-1: Hover {
  --_ T: var (-h);
}

Wenn Sie sich fragen, warum ich der Variablen --_t einen Unterstrich hinzufüge, ist dies nur eine Namenskonvention, mit der ich zwischen Variablen (wie --h ) unterscheidet, die Benutzer von internen Variablen (wie --_t ) aktualisieren k?nnen, die nur für Optimierungszwecke verwendet werden und nicht ge?ndert werden müssen. Mit anderen Worten, Unterstriche sind Teil des variablen Namens und haben keine besondere Bedeutung.

Wir k?nnen den Code auch aktualisieren, um den gegenteiligen Effekt zu erzielen, bei dem doppelte Text von oben einsieht:

Wir haben nur ein kleines Update für text-shadow -Eigenschaft gemacht - wir haben nichts anderes berührt!

Schweber Effekt #2

Für diesen Effekt werden wir zwei Eigenschaften animieren: text-shadow und background . In Bezug auf text-shadow haben wir immer noch zwei Ebenen wie das vorherige Beispiel, aber diesmal werden wir nur einen von ihnen bewegen, w?hrend wir die Farbe der anderen Ebene w?hrend des Swaps auf transparentes stellen.

 .hover-2 {
  /* hoch*/
  --H: 1.2EM;

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 var (--_ t, var (-h)) #fff,
    0 0 var (--c, #000);
  übergang: 0,3s;
}
.hover-2: Hover {
  --_ T: 0;
  --_ C: #0000;
}

Beim Schweber bewegen wir die wei?e Textschicht nach oben und ?ndern die Farbe der anderen Ebene in transparent. Zu diesem Zweck haben wir eine Animation background-size hinzugefügt, die auf Gradienten angewendet wird:

Schlie?lich fügen wir overflow: hidden um die Animation nur innerhalb der Grenzen des Elements sichtbar zu machen:

 .hover-2 {
  /* hoch*/
  --H: 1.2EM;

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 var (--_ t, var (-h)) #ffff,
    0 0 var (--c, #000);
  Hintergrund: 
    linear-Gradient (#1095C1 0 0) 
    Bottom/100% var (--_ D, 0) No-Repeat;
  überlauf: versteckt;
  übergang: 0,3s;
}
.hover-2: Hover {
  --_ D: 100%;
  --_ T: 0;
  --_ C: #0000;
}

Was wir hier tun, ist, die CSS- text-shadow und background zu kombinieren, um einen coolen Schwebeffekt zu erzielen. Darüber hinaus k?nnen wir CSS -Variablen verwenden, um den Code zu optimieren.

Wenn die Hintergrundgrammatik komisch aussieht, empfehle ich Ihnen dringend, meinen vorherigen Beitrag zu lesen. Der n?chste Schwebeffekt stützt sich auch auf der Animation, die ich in diesem Beitrag beschrieben habe. Wenn Sie nicht mit CSS -Hintergrundf?higkeiten vertraut sind, empfehle ich Ihnen, diesen Artikel zu lesen, um weitere Hintergrundinformationen zu erhalten, bevor Sie diesen Artikel weiter lesen.

In früheren Beitr?gen haben Sie uns gezeigt, wie Sie einen Schwebeffekt mit nur einer Variablen erstellen k?nnen. K?nnen Sie das hier tun?

Ja, absolut! Wir k?nnen in der Tat dieselbe Trockenschalttechnik verwenden, damit wir nur eine CSS -benutzerdefinierte Eigenschaft verarbeiten müssen, die nur beim Schwebewechsel die Werte wechselt:

 .hover-2 {
  /* hoch*/
  --H: 1.2EM;

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 var (--_ i, var (-h)) #fff,
    0 0 rgb (0 0 0 / calc (var (--_ i, 1) * 100%));
  Hintergrund: 
    linear-Gradient (#1095C1 0 0) 
    Bottom/100% Calc (100%-var (--_ i, 1) * 100%) No-Repeat;
  überlauf: versteckt;
  übergang: 0,3s;
}
.hover-2: Hover {
  --_ I: 0;
}

Schweber Effekt #3

Dieser Schwebeffekt ist nichts anderes als eine Kombination von zwei Effekten, die wir erzielt haben: der zweite Schweberffekt im vorherigen Beitrag und der erste Schwebeffekt in diesem Beitrag.

 .hover-3 {
  /* Farbe*/
  --C: #1095c1;
  /* hoch*/
  --H: 1.2EM;

  /* Der erste Schwebeffekt in diesem Artikel*/
  Zeilenh?he: var (-h);  
  Farbe: #0000;
  überlauf: versteckt;
  Textschatten: 
    0 calc (-1 * var (--_ t, 0em)) var (-c), 
    0 calc (var (-h)-var (--_ t, 0em)) #fff;
  /* Der zweite Schwebeffekt im vorherigen Beitrag*/
  Hintergrund: 
    linear-Gradient (var (-c) 0 0) No-Repeat 
    Calc (200%-var (--_ P, 0%)) 100% / 200% var (--_ P, 0,08em);
  übergang: .3s var (--_ s, 0s), Hintergrundposition .3s calc (.3s-var (--_ s, 0s));
}
.hover-3: Hover {
  --_ T: var (-h);
  --_ P: 100%;
  --_ S: .3s
}

Ich habe nur die Effekte aus anderen Beispielen kopiert und eingefügt und einige kleinere ?nderungen an den variablen Namen vorgenommen. Wenn sie kombiniert werden, erzeugen sie einen sauberen Schwebeffekt! Auf den ersten Blick mag dieser Effekt komplex und schwer zu erreichen erscheinen, aber am Ende kombiniert er einfach zwei relativ einfache Effekte zu einem.

Wenn wir frühere Optimierungen berücksichtigen, die wir abgeschlossen haben, sollte es auch eine einfache Aufgabe sein, den Code mithilfe der Variablentechnologie der Trockenschalttechnik zu optimieren:

 .hover-3 {
  /* Farbe*/
  --C: #1095c1;
  /* hoch*/
  --H: 1.2EM;

  Zeilenh?he: var (-h);  
  Farbe: #0000;
  überlauf: versteckt;
  Textschatten: 
    0 calc (-1 * var (-h) * var (--_ i, 0)) var (-c), 
    0 calc (var (-h) * (1-var (--_ i, 0))) #fff;
  Hintergrund: 
    linear-Gradient (var (-c) 0 0) No-Repeat
    Calc (200%-var (--_ i, 0) * 100%) 100% / 200% Calc (100% * var (--_ i, 0) .08em);
  übergang: .3s calc (var (--_ i, 0) * .3s), Hintergrundposition .3s Calc (.3s-Calc (var (--_ i, 0) * .3s));
}
.hover-3: Hover {
  --_ I: 1;
}

Hover -Effekt #4

Dieser Schwebeffekt ist eine Verbesserung des zweiten Schwebeffekts. Lassen Sie uns zun?chst eine clip-path -Animation vorstellen, um eine der Textschichten anzuzeigen und sie dann zu verschieben:

Hier ist eine bessere Erkl?rung, um besser zu verstehen, was los ist:

Zun?chst haben wir inset(0 0 0 0) verwendet, der dem overflow: hidden , da wir nur den tats?chlichen Text sehen. Beim Schweber aktualisieren wir den dritten Wert (der den unteren Offset darstellt) mit einem negativen Wert, der der H?he entspricht, um die unten platzierte Textebene anzuzeigen.

Von dort aus k?nnen wir dies dem zweiten Schwebeffekt hinzufügen, den wir in diesem Artikel gemacht haben, und hier ist was wir bekommen:

Wir kommen immer n?her! Beachten Sie, dass wir zuerst clip-path -Animation und dann alles andere ausführen müssen. Dazu k?nnen wir alle Eigenschaften von Schwebepl?tzen eine Verz?gerung verleihen, au?er clip-path :

 übergang: 0,4s 0,4s, Clip-Pfad 0,4s;

Wenn die Maus ausgezogen ist, tun wir das Gegenteil:

 übergang: 0,4s, Clip-Pfad 0,4s 0,4s;

Der letzte Touch besteht darin, einen box-shadow hinzuzufügen, um den Gleiteffekt des blauen Rechtecks ??zu erzeugen. Leider erzeugt background diesen Effekt nicht, da der Hintergrund standardm??ig in den Inhaltsbereich zugeschnitten ist. Gleichzeitig kann box-shadow über den Inhaltsbereich hinausgehen.

 .hover-4 {
  /* Farbe*/
  --C: #1095c1;
  /* hoch*/
  --H: 1.2EM;

  Zeilenh?he: var (-h);
  Farbe: #0000;
  Textschatten: 
    0 var (--_ t, var (-h)) #fff,
    0 0 var (--c, #000);
  Box-shadow: 0 var (--_ t, var (-h)) var (-c);
  Clip-Pfad: Einschub (0 0 0 0);
  Hintergrund: Linear-Gradient (var (-c) 0 0) 0 var (--_ t, var (-h)) No-Repeat;
  übergang: 0,4s, Clip-Pfad 0,4s 0,4s;
}
.hover-4: Hover {
  --_ T: 0;
  --_ C: #0000;
  Clip-Pfad: Einschub (0 0 calc (-1 * var (-h)) 0);
  übergang: 0,4s 0,4s, Clip-Pfad 0,4s;
}

Wenn Sie box-shadow genau schauen, werden Sie feststellen, dass es den gleichen Wert hat wie die wei?e Textebene in text-shadow . Dies ist logisch, da beide auf die gleiche Weise bewegt werden müssen. Beide rutschen nach oben. box-shadow befindet sich dann hinter dem Element und text-shadow oben.

Hier finden Sie eine Demonstration mit einigen Modifikationen, um sich zu visualisieren, wie Ebenen bewegen:

Warten Sie, die Hintergrundsyntax unterscheidet sich geringfügig von der im zweiten Schwebeeffekt verwendeten!

Gute Augen! Ja, wir verwenden verschiedene Hintergrundtechniken, um den gleichen Effekt zu erzielen. Anstatt die Gr??e von 0% bis 100% zu anschlie?en, beleben wir die Position.

Wenn wir die Gr??e des Gradienten nicht angeben, wird sie standardm??ig die gesamte Breite und H?he einnehmen. Da wir die H?he des Elements ( --h ) kennen, k?nnen wir einen Gleiteffekt erstellen, indem wir die Position von 0 var(--h) bis 0 0 aktualisieren.

 .hover-4 {
  / * ... */
  Hintergrund: Linear-Gradient (var (-c) 0 0) 0 var (--_ t, var (-h)) No-Repeat;
}
.hover-4: Hover {
  --_ T: 0;
}

Wir k?nnen die Animation background-size verwenden, um den gleichen Effekt zu erzielen, aber wir haben nur einen weiteren Trick zu unserer Liste der Tricks hinzugefügt!

In der Demo haben Sie auch inset(0 0 1px 0) verwendet… warum?

Manchmal füge ich hier einige Pixel oder Prozents?tze hinzu oder entferne ich, um etwas zu perfektionieren, das nicht sehr gut aussieht. In diesem Fall wird unten eine schlechte Linie angezeigt, wobei das Hinzufügen von 1PX sie entfernen.

Wie w?re es mit trockenen Variablenoptimierung?

Ich überlasse dir diese Aufgabe! Nach dem Lesen dieser vier Schwebeffekte und früheren Artikel sollten Sie in der Lage sein, den Code so zu aktualisieren, dass nur eine Variable verwendet wird. Ich würde gerne Ihren Versuch in den Kommentaren sehen!

jetzt du!

Lassen Sie mich den letzten Schwebeffekt teilen, bei dem es sich um eine weitere Version des vorherigen Effekts handelt. K?nnen Sie herausfinden, wie es implementiert wird, ohne den Code zu betrachten? Dies ist eine gro?artige übung, also nicht betrügen!

Zusammenfassen

Wir haben uns viele Beispiele angesehen, die zeigen, wie ausreichend ein Element und ein paar CSS-Zeilen ausreichen, um einen ziemlich komplexen Schwebeeffekt auf Textelemente zu erzielen-keine Pseudoelemente sind erforderlich! Wir sind sogar in der Lage, mehrere Technologien zu kombinieren, um komplexere Animationen mit kleineren Anstrengungen zu erreichen.

Wenn Sie daran interessiert sind, in diesem Artikel über diese vier Hover -Effekte von Text Shadow -Schwebezeugen hinauszugehen, lesen Sie meine Sammlung von 500 Schwebeffekten, wo ich eine Vielzahl verschiedener Techniken erforsche.

Das obige ist der detaillierte Inhalt von4 coole Schwebeffekte, die CSS -Textschatten verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!