4 coole Schwebeffekte, die CSS -Textschatten verwenden

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!