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!