Coole Schwebeffekte, die Hintergrundeigenschaften verwenden

Vor einiger Zeit schrieb Geoff einen Artikel über einen coolen Schwebeffekt. Der Effekt beruht auf einer Kombination von CSS-Pseudoelementen, Transformationen und Übergängen. Viele Kommentare haben gezeigt, dass der gleiche Effekt unter Verwendung von Hintergrundeigenschaften durchgeführt werden kann. Geoff erwähnte, dass dies sein erster Gedanke war und das habe ich auch gedacht. Ich sage nicht, dass das Pseudoelement, auf dem er gelandet ist, schlecht ist, aber es kann nur eine gute Sache sein, verschiedene Methoden zu kennen, um den gleichen Effekt zu erzielen.

Coole Hover Effects -Serie:

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

In diesem Beitrag werden wir diesen Schwebeffekt überarbeiten, sie aber auch in andere Arten von Schwebeffekten erweitern, die nur CSS-Hintergrundeigenschaften verwenden.

Sie können die Hintergrundeigenschaften in dieser Demo bei der Arbeit sehen und wie wir benutzerdefinierte Eigenschaften und die Funktion Calc () verwenden können, um noch mehr zu tun. Wir werden lernen, wie man all dies kombiniert, also bleibt wir mit schön optimiertem Code!

Schwebeffekt #1

Beginnen wir mit dem ersten Effekt, der die Reproduktion der von Geoff in seinem Artikel beschriebenen Reproduktion ist. Der Code, der verwendet wird, um diesen Effekt zu erzielen, ist der folgende:

 .hover-1 {
  Hintergrund: Linear-Gradient (#1095C1 0 0) var (-p, 0) / var (-p, 0) No-Repeat;
  Übergang: .4s, Hintergrundposition 0s;
}
.hover-1: Hover {
  -P: 100%;
  Farbe: #fff;
}

Wenn wir den Farbübergang weglassen (was optional ist), benötigen wir nur drei CSS -Erklärungen, um den Effekt zu erzielen. Sie sind wahrscheinlich überrascht, wie klein der Code ist, aber Sie werden sehen, wie wir dorthin gekommen sind.

Beginnen wir zunächst mit einem einfachen Übergang von Hintergrundgröße:

Wir animieren die Größe eines linearen Gradienten von 0 100% bis 100% 100%. Das bedeutet, dass die Breite von 0 bis 100% verläuft, während der Hintergrund selbst in voller Höhe bleibt. Bisher nichts Komplexes.

Beginnen wir unsere Optimierungen. Wir verwandeln zuerst unseren Gradienten, um die Farbe nur einmal zu verwenden:

 Hintergrund-Image: Linear-Gradient (#1095C1 0 0);

Die Syntax mag etwas seltsam aussehen, aber wir sagen dem Browser, dass eine Farbe auf zwei Farbstopps angewendet wird, und das reicht aus, um einen Gradienten in CSS zu definieren. Beide Farbstopps sind 0, so dass der Browser automatisch den letzten 100% macht und unseren Gradienten mit derselben Farbe füllt. Verknüpfungen, ftw!

Mit Hintergrundgröße können wir die Höhe weglassen, da die Gradienten standardmäßig in voller Höhe sind. Wir können einen Übergang von Hintergrundgröße durchführen: 0 zu Hintergrundgröße: 100%.

 .hover-1 {
  Hintergrund-Image: Linear-Gradient (#1095C1 0 0);
  Hintergrundgröße: 0;
  Hintergrundrepeat: No-Repeat;
  Übergang: .4s;
}
.hover-1: Hover {
  Hintergrundgröße: 100%;
}

Lassen Sie uns eine benutzerdefinierte Eigenschaft vorstellen, um die Wiederholung von Hintergrundgröße zu vermeiden:

 .hover-1 {
  Hintergrund-Image: Linear-Gradient (#1095C1 0 0);
  Hintergrundgröße: var (-p, 0%);
  Hintergrundrepeat: No-Repeat;
  Übergang: .4s;
}
.hover-1: Hover {
  -P: 100%;
}

Wir definieren anfangs nicht -P, daher wird der Fallback -Wert (0% in unserem Fall) verwendet. Bei Schweber definieren wir einen Wert, der den Fallback ersetzt (100%).

Lassen Sie uns nun alle Hintergrundeigenschaften mithilfe der Kurzversion kombinieren, um zu erhalten:

 .hover-1 {
  Hintergrund: Linear-Gradient (#1095c1 0 0) links / var (-p, 0%) No-Repeat;
  Übergang: .4s;
}
.hover-1: Hover {
  -P: 100%;
}

Wir kommen näher! Beachten Sie, dass ich einen linken Wert (für die Hintergrundposition) eingeführt habe, der bei der Definition der Größe im Hintergrund-Kurzpunkt obligatorisch ist. Außerdem brauchen wir es trotzdem, um unseren Schwebeffekt zu erzielen.

Wir müssen auch die Position auf dem Schweber aktualisieren. Wir können das in zwei Schritten tun:

1. Erhöhen Sie die Größe von rechts auf der Maus -Schwebedauer.
2. Verringern Sie die Größe von links auf der Maus.

Dazu müssen wir auch die Hintergrundposition auf Hover aktualisieren:

Wir haben unserem Code zwei Dinge hinzugefügt:

• Ein Hintergrundpositionswert von rechts auf Schwebe
• Eine Übergangsdauer von 0s auf der Hintergrundposition

Dies bedeutet, dass wir bei schwachem Umfang die Hintergrundposition sofort von links ändern (siehe, wir brauchten diesen Wert!) Nach rechts, damit die Größe des Hintergrunds von der rechten Seite zunimmt. Wenn dann der Maus -Cursor die Verbindung verlässt, spielt der Übergang von rechts nach links in umgekehrt, sodass wir die Größe des Hintergrunds von der linken Seite verringern. Unser Schwebeeffekt ist erledigt!

Aber Sie sagten, wir brauchen nur drei Erklärungen und es gibt vier.

Das ist wahr, schöner Fang. Die linken und rechten Werte können auf 0 0 bzw. 100% 0 geändert werden. Und da unser Gradient standardmäßig bereits in voller Höhe ist, können wir mit 0 und 100%erhalten.

 .hover-1 {
  Hintergrund: Linear-Gradient (#1095C1 0 0) 0 / var (-p, 0%) No-Repeat;
  Übergang: .4s, Hintergrundposition 0s;
}
.hover-1: Hover {
  -P: 100%;
  Hintergrundposition: 100%;
}

Sehen Sie, wie Hintergrundposition und--P dieselben Werte verwenden? Jetzt können wir den Code auf drei Erklärungen reduzieren:

 .hover-1 {
  Hintergrund: Linear-Gradient (#1095c1 0 0) var (-p, 0%) / var (-p, 0%) No-Repeat;
  Übergang: .4s, Hintergrundposition 0s;
}
.hover-1: Hover {
  -P: 100%;
}

Die benutzerdefinierte Eigenschaft -P definiert sowohl die Hintergrundposition als auch die Größe. Bei schwebem Schwebe wird es auch beide aktualisiert. Dies ist ein perfekter Anwendungsfall, der zeigt, wie benutzerdefinierte Eigenschaften uns helfen können, redundanten Code zu reduzieren und keine Eigenschaften zu schreiben. Wir definieren unsere Einstellung anhand benutzerdefinierter Eigenschaften und aktualisieren nur letztere auf Schwebungen.

Aber der Effekt, den Geoff beschrieben hat, geht das Gegenteil, beginnt von links und endet rechts. Wie machen wir das, wenn es so aussieht, als ob wir uns nicht auf die gleiche Variable verlassen können?

Wir können weiterhin eine Variable verwenden und unseren Code geringfügig aktualisieren, um den gegenteiligen Effekt zu erzielen. Wir wollen von 100% bis 0% statt 0% bis 100%. Wir haben einen Unterschied von 100%, den wir mit Calc () wie folgt ausdrücken können:

 .hover-1 {
  Hintergrund: Linear-Gradient (#1095c1 0 0) Calc (100%-var (-p, 0%)) / var (-p, 0%) No-Repeat;
  Übergang: .4s, Hintergrundposition 0s;
}
.hover-1: Hover {
  -P: 100%;
}

--P wird sich von 0% auf 100% ändern, aber dank Calc () wird sich die Position des Hintergrunds von 100% auf 0% ändern.

Wir haben immer noch drei Erklärungen und eine benutzerdefinierte Eigenschaft, aber einen anderen Effekt.

Bevor wir zum nächsten Schwebeeffekt wechseln, möchte ich etwas Wichtiges hervorheben, das Sie wahrscheinlich bemerkt haben. Wenn ich mit benutzerdefinierten Eigenschaften zu tun habe, verwende ich 0% (mit einer Einheit) anstelle einer Einheit ohne Einheit von 0. Die uneinheitliche Null kann funktionieren, wenn die benutzerdefinierte Eigenschaft allein ist, fällt jedoch in Calc () aus, wo wir das Gerät explizit definieren müssen. Möglicherweise benötige ich einen anderen Artikel, um diese Eigenart zu erklären, aber denken Sie immer daran, das Gerät beim Umgang mit benutzerdefinierten Eigenschaften hinzuzufügen. Ich habe zwei Antworten auf Stackoverflow (hier und hier), die detaillierter werden.

Schweber Effekt #2

Wir brauchen einen komplexeren Übergang für diesen Effekt. Schauen wir uns eine Schritt-für-Schritt-Abbildung an, um zu verstehen, was passiert.

Wir haben zuerst einen Übergang von Hintergrundpositionen, gefolgt von einer Hintergrundgröße. Lassen Sie uns dies in Code übersetzen:

 .hover-2 {
  Hintergrund-Image: Linear-Gradient (#1095C1 0 0);
  Hintergrundgröße: 100% .08em; /* .08em ist unsere feste Höhe; nach Bedarf ändern. */
  Hintergrundposition: /* ??? */;
  Hintergrundrepeat: No-Repeat;
  Übergang: Hintergrundgröße .3s, Hintergrundposition .3s .3s;
}
.hover-2: Hover {
  Übergang: Hintergrundgröße .3s .3s, Hintergrundposition .3s;
  Hintergrundgröße: 100% 100%;
  Hintergrundposition: /* ??? */;
}

Beachten Sie die Verwendung von zwei Übergangswerten. Beim Schweber müssen wir zuerst die Position und später die Größe ändern, weshalb wir die Größe zu einer Verzögerung hinzufügen. Bei der Maus machen wir das Gegenteil.

Die Frage ist jetzt: Welche Werte verwenden wir für die Hintergrundposition? Wir haben diese leere oben gelassen. Die Hintergrundgröße sind trivial, die für die Hintergrundposition jedoch nicht. Und wenn wir die tatsächliche Konfiguration behalten, können wir unseren Gradienten nicht bewegen.

Unser Gradient hat eine Breite von 100%, sodass wir keine Prozentwerte für die Hintergrundposition verwenden können, um sie zu bewegen.

Prozentsatzwerte mit Hintergrundposition sind immer ein Schmerz, insbesondere wenn Sie sie zum ersten Mal verwenden. Ihr Verhalten ist nicht intuitiv, aber gut definiert und leicht zu verstehen, ob wir die Logik dahinter bekommen. Ich denke, es würde einen weiteren Artikel benötigen, um eine vollständige Erklärung zu erhalten, warum es so funktioniert, aber hier ist eine weitere „lange“ Erklärung, die ich beim Stack -Überlauf gepostet habe. Ich empfehle, ein paar Minuten Zeit zu nehmen, um diese Antwort zu lesen, und Sie werden mir später danken!

Der Trick besteht darin, die Breite in etwas anderes als 100%zu ändern. Lassen Sie uns 200%verwenden. Wir machen uns keine Sorgen darüber, dass der Hintergrund das Element überschreitet, da der Überlauf ohnehin versteckt ist.

 .hover-2 {
  Hintergrund-Image: Linear-Gradient (#1095C1 0 0);
  Hintergrundgröße: 200% .08em;
  Hintergrundposition: 200% 100%;
  Hintergrundrepeat: No-Repeat;
  Übergang: Hintergrundgröße .3s, Hintergrundposition .3s .3s;
}
.hover-2: Hover {
  Übergang: Hintergrundgröße .3s .3s, Hintergrundposition .3s;
  Hintergrundgröße: 200% 100%;
  Hintergrundposition: 100% 100%;
}

Und hier ist was wir bekommen:

Es ist Zeit, unseren Code zu optimieren. Wenn wir die Ideen nehmen, die wir aus dem ersten Schwebeffekt gelernt haben, können wir Kurzeigenschaften verwenden und weniger Erklärungen schreiben, um diese Arbeit zu machen:

 .hover-2 {
  Hintergrund: 
    Lineargradient (#1095C1 0 0) No-Repeat
    var (-p, 200%) 100% / 200% var (-p, 0,08em);
  Übergang: .3s var (-t, 0s), Hintergrundposition .3s calc (.3s-var (-t, 0s));
}
.hover-2: Hover {
  -P: 100%;
  -T: .3s;
}

Wir fügen alle Hintergrundeigenschaften mithilfe der Shorthand -Version zusammen, dann verwenden wir -P, um unsere Werte auszudrücken. Die Größen wechseln von 0,08M auf 100% und die Position von 200% auf 100%

Ich verwende auch eine andere Variable - -T, um die Übergangseigenschaft zu optimieren. Bei der Maus -Schwebeplatte haben wir es auf einen .3s -Wert eingestellt, was uns Folgendes gibt:

 Übergang: .3s .3s, Hintergrundposition .3s 0s;

Bei der Maus ist - -T undefiniert, so dass der Fallback -Wert verwendet wird:

 Übergang: .3s 0s, Hintergrundposition .3s .3s;

Sollten wir nicht im Übergang eine Hintergrundgröße haben?

Das ist in der Tat eine weitere Optimierung, die wir durchführen können. Wenn wir keine Eigenschaft angeben, bedeutet dies „alle“ die Eigenschaften, so dass der Übergang für „alle“ die Eigenschaften (einschließlich Hintergrundgröße und Hintergrundposition) definiert ist. Dann ist es erneut für die Hintergrundposition definiert, die der Definition für die Hintergrundgröße und dann für die Hintergrundposition ähnelt.

"Ähnliches" ist anders als das "etwas ist das gleiche". Sie werden einen Unterschied sehen, wenn Sie mehr Eigenschaften für den Schwebewesen ändern, sodass die letzte Optimierung in einigen Fällen möglicherweise ungeeignet ist.

Können wir den Code noch optimieren und nur eine benutzerdefinierte Eigenschaft verwenden?

Ja, wir können! Ana Tudor hat einen großartigen Artikel geteilt, in dem erklärt wird, wie ein Trockenschalter erstellt wird, bei dem eine benutzerdefinierte Eigenschaft mehrere Eigenschaften aktualisieren kann. Ich werde hier nicht auf die Details eingehen, aber unser Code kann so überarbeitet werden:

 .hover-2 {
  Hintergrund: 
    Lineargradient (#1095C1 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-2: Hover {
  --I: 1;
}

Die -i -benutzerdefinierte Eigenschaft ist ursprünglich nicht definiert, so dass der Fallback -Wert 0 verwendet wird. Bei schwebem Schwebewesen ersetzen wir 0 durch 1. Sie können für beide Fälle die Mathematik ausführen und die Werte für jeden einzelnen erhalten. Sie können diese Variable als „Switch“ sehen, die alle unsere Werte gleichzeitig im Schwebeding aktualisieren.

Auch hier sind wir wieder nur drei Erklärungen für einen ziemlich coolen Schweberffekt!

Schweber Effekt #3

Wir werden für diesen Effekt zwei Gradienten anstelle eines verwenden. Wir werden sehen, dass die Kombination mehrerer Gradienten eine weitere Möglichkeit ist, ausgefallene Schwebebereicheffekte zu erzielen.

Hier ist ein Diagramm von dem, was wir tun:

So sieht das in CSS aus:

 .hover-3 {
  Hintergrundbild:
    linear-Gradient (#1095C1 0 0),
    linear-Gradient (#1095C1 0 0);
  Hintergrundrepeat: No-Repeat;
  Hintergrundgröße: 50% .08em;
  Hintergrundposition:
    -100% 100%,
    200% 0;
  Übergang: Hintergrundgröße .3s, Hintergrundposition .3s .3s;
}
.hover-3: Hover {
  Hintergrundgröße: 50% 100%;
  Hintergrundposition:
    0 100%,
    100% 0;  
  Übergang: Hintergrundgröße .3s .3s, Hintergrundposition .3s;
}

Der Code entspricht fast den anderen Schwebeffekten, die wir abgedeckt haben. Der einzige Unterschied besteht darin, dass wir zwei Gradienten mit zwei verschiedenen Positionen haben. Die Positionswerte mögen seltsam aussehen, aber auch hier bezieht sich das mit der Funktionsweise von Prozentsätzen mit der Hintergrundpositionseigenschaft in CSS. Ich empfehle daher dringend, meinen Stapelüberlauf zu lesen, wenn Sie sich in die kiesigen Details befassen möchten.

Jetzt optimieren wir! Sie erhalten inzwischen die Idee - wir verwenden Kurzeigenschaften, benutzerdefinierte Eigenschaften und Calc (), um die Dinge aufzuräumen.

 .hover-3 {
  --C: No-Repeat Linear-Gradient (#1095C1 0 0);
  Hintergrund: 
    var (-c) calc (-100% var (-p, 0%)) 100% / 50% var (-p, 0,08em),
    var (-c) calc (200%-var (-p, 0%)) 0 /50% var (-p, 0,08em);
  Übergang: .3s var (-t, 0s), Hintergrundposition .3s calc (.3s-var (-t, 0s));
}
.hover-3: Hover {
  -P: 100%;
  -T: 0,3s;
}

Ich habe eine zusätzliche benutzerdefinierte Eigenschaft, - -C, hinzugefügt, die den Gradienten definiert, da derselbe Gradient an beiden Stellen verwendet wird.

Ich verwende 50,1% in dieser Demo anstelle von 50% für die Hintergrundgröße, da sie verhindert, dass eine Lücke zwischen den Gradienten zeigt. Aus ähnlichen Gründen habe ich auch 1% zu den Positionen hinzugefügt.

Lassen Sie uns die zweite Optimierung mithilfe der Switch -Variablen durchführen:

 .hover-3 {
  --C: No-Repeat Linear-Gradient (#1095C1 0 0);
  Hintergrund: 
    var (-c) calc (-100% var (-i, 0) * 100%) 100% / 50% Calc (100% * var (-i, 0) .08em),
    var (-c) calc (200%-var (-i, 0) * 100%) 0 /50% calc (100% * var (-i, 0) .08em);
  Übergang: .3s calc (var (-i, 0) * .3s), Hintergrundposition .3s calc (.3s-var (-i, 0) * .3s);
}
.hover-3: Hover {
  --I: 1;
}

Fangen Sie angefangen, die Muster hier zu sehen? Es ist nicht so sehr, dass die Effekte, die wir haben, schwierig sind. Es ist eher der "letzte Schritt" der Codeoptimierung. Wir schreiben mit vielen Eigenschaften aus dem ausführlichen Code und reduzieren ihn dann nach einfachen Regeln (z. B. mit Shorthand, Entfernen von Standardwerten, Vermeidung redundanter Werte usw.), um die Dinge so weit wie möglich zu vereinfachen.

Hover -Effekt #4

Ich werde den Schwierigkeitsgrad für diesen letzten Effekt erhöhen, aber Sie wissen genug aus den anderen Beispielen, dass ich bezweifle, dass Sie Probleme mit diesem haben.

Dieser Schwebeffekt basiert auf zwei Kegelgradienten und mehr Berechnungen.

Zunächst haben wir beide Gradienten ohne Abmessungen in Schritt 1. Wir erhöhen die Größe von jedem in Schritt 2. Wir erhöhen ihre Breiten weiter, bis sie das Element vollständig abdecken, wie in Schritt 3 gezeigt. Danach schieben wir sie nach unten, um ihre Position zu aktualisieren. Dies ist der „magische“ Teil des Schwebeffekts. Da beide Gradienten dieselbe Färbung verwenden, macht das Ändern ihrer Position in Schritt 4 keinen visuellen Unterschied - aber wir werden einen Unterschied sehen, sobald wir die Größe der Maus in Schritt 5 verringern.

Wenn Sie Schritt 2 und Schritt 5 vergleichen, können Sie sehen, dass wir eine andere Neigung haben. Lassen Sie uns das in Code übersetzen:

 .hover-4 {
  Hintergrundbild:
    konikativer Gradient (/ * ??? */),
    CONIC-Gradient (/ * ??? */);
  Hintergrundposition:
    0 0,,
    100% 0;
  Hintergrundgröße: 0% 200%;
  Hintergrundrepeat: No-Repeat;
  Übergang: Hintergrundgröße .4s, Hintergrundposition 0s;
}
.hover-4: Hover {
  Hintergrundgröße: /* ??? */ 200%;
  Hintergrundposition:
    0 100%,
    100% 100%;
}

Die Positionen sind ziemlich klar. Ein Gradienten beginnt oben links (0 0) und endet unten links (0 100%), während der andere oben rechts (100% 0) beginnt und unten rechts endet (100% 100%).

Wir verwenden einen Übergang über die Hintergrundpositionen und -größen, um sie zu enthüllen. Wir brauchen nur einen Übergangswert für die Hintergrundgröße. Und wie zuvor muss sich die Hintergrundposition sofort ändern, sodass wir einen 0s-Wert für die Dauer des Übergangs zuweisen.

Für die Größen müssen beide Gradienten 0 Breite und doppelt so hoch wie die Elementhöhe (0% 200%) haben. Wir werden später sehen, wie sich ihre Größen im Schwebedruck ändern. Lassen Sie uns zunächst die Gradientenkonfiguration definieren.

Das folgende Diagramm zeigt die Konfiguration jedes Gradienten:

Beachten Sie, dass wir für den zweiten Gradienten (in grün angegeben) wissen müssen, wie hoch sie in den von uns erstellten Konikatoren verwenden können. Aus diesem Grund werde ich eine Zeilenhöhe hinzufügen, die die Höhe des Elements festlegt und dann denselben Wert für die von uns ausgelassenen Kegelgradientenwerte ausprobieren.

 .hover-4 {
  --C: #1095c1;
  Zeilenhöhe: 1.2EM;
  Hintergrundbild:
    Conic-Gradient (von -135de bei 100% 50%, var (-c) 90 °, #0000 0),
    Konic-Gradient (ab -135de bei 1,2EM 50%, #0000 90 °, var (-c) 0);
  Hintergrundposition:
    0 0,,
    100% 0;
  Hintergrundgröße: 0% 200%;
  Hintergrundrepeat: No-Repeat;
  Übergang: Hintergrundgröße .4s, Hintergrundposition 0s;
}
.hover-4: Hover {
  Hintergrundgröße: /* ??? */ 200%;
  Hintergrundposition:
    0 100%,
    100% 100%;
}

Das Letzte, was wir noch haben, ist, die Größe des Hintergrunds herauszufinden. Intuitiv denken wir vielleicht, dass jeder Gradient die Hälfte der Breite des Elements aufnehmen muss, aber das ist eigentlich nicht genug.

Wir erhalten eine Lücke, die der Höhe entspricht, sodass wir tatsächlich die Größe jedes Gradienten um die Hälfte der Höhe der Höhe erhöhen müssen, damit sie das gesamte Element abdecken.

 .hover-4: Hover {
  Hintergrundgröße: CALC (50% .6EM) 200%;
  Hintergrundposition:
    0 100%,
    100% 100%;
}

Folgendes erhalten wir, nachdem wir sie wie die vorherigen Beispiele optimiert haben:

 .hover-4 {
  --C: #1095c1;
  Zeilenhöhe: 1.2EM;
  Hintergrund:
    Conic-Gradient (von -135de bei 100% 50%, var (-c) 90 °, #0000 0) 
      0 var (-p, 0%) / var (-s, 0%) 200%No-Repeat,
    Conic-Gradient (ab -135de bei 1,2EM 50%, #0000 90de, var (-c) 0) 
      100% var (-p, 0%) / var (-s, 0%) 200% No-Repeat;
  Übergang: .4s, Hintergrundposition 0s;
}
.hover-4: Hover {
  -P: 100%;
  --S: Calc (50% .6EM);
}

Was ist mit der Version mit nur einer benutzerdefinierten Eigenschaft?

Ich werde das für dich lassen! Nachdem Sie vier ähnliche Schwebeffekte angesehen haben, sollten Sie in der Lage sein, die endgültige Optimierung auf eine einzelne benutzerdefinierte Eigenschaft zu erhalten. Teilen Sie Ihre Arbeit im Kommentarbereich! Es gibt keinen Preis, aber wir können mit unterschiedlichen Implementierungen und Ideen kommen, die allen zugute kommen!

Bevor wir enden, lassen Sie mich eine Version dieses letzten Schwebeffekts teilen, den Ana Tudor gekocht hat. Es ist eine Verbesserung! Beachten Sie jedoch, dass es aufgrund eines bekannten Fehlers fehlt. Trotzdem ist es eine großartige Idee, die zeigt, wie man Gradienten mit Mischmodi kombiniert, um noch coolere Schwebeffekte zu erzielen.

Einpacken

Wir haben vier super coole Schwebeffekte gemacht! Und obwohl es sich um unterschiedliche Effekte handelt, verfolgen sie alle den gleichen Ansatz bei der Verwendung von CSS -Hintergrundeigenschaften, benutzerdefinierten Eigenschaften und Calc (). Verschiedene Kombinationen ermöglichten es uns, verschiedene Versionen zu erstellen, die alle die gleichen Techniken verwenden, die uns mit sauberem, wartbarem Code lassen.

Wenn Sie einige Ideen bekommen möchten, habe ich eine Sammlung von 500 (ja, 500!) Schwebeffekten erstellt, von denen 400 ohne Pseudoelemente durchgeführt werden. Die vier, die wir in diesem Artikel behandelt haben, sind nur die Spitze des Eisbergs!

Das obige ist der detaillierte Inhalt vonCoole Schwebeffekte, die Hintergrundeigenschaften verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!