CSS Farbe gemischte Animation: Erforschen Sie den Charme von animation-composition

Mit der immer beliebteren Funktion ist die CSS -Farbmischung recht einfach geworden. Geben Sie einfach zwei Farbwerte (jeder Farbwert) über und setzen Sie die Skala optional. color-mix()

background-color: color-mix(#000 30%, #fff 70%);

Wir k?nnen auch die relative Farbsyntax verwenden, um Farben zwischen verschiedenen Farbr?umen zu manipulieren und sie zu modifizieren. Der Hauptgebrauchsfall besteht darin, Farbwerten (z. B. benannte Farben) Transparenz hinzuzufügen, die keine Transparenz unterstützen.

background-color: hsl(from black h s l); /* hsl(0 0% 0%) */
background-color: hsl(from black h s l / 50%); /* hsl(0 0% 0% / 50%) */

Natürlich k?nnen wir auch einige "Hack" -Methoden verwenden, z. B. zwei undurchsichtige Elemente. Oder verwenden Sie

, um ?hnliche Effekte zu erzielen. mix-blend-mode

Ein weiterer Ansatz ergibt sich aus den neuesten Updates zu Almanac -Animationseigenschaften von Ryan. Wie wir alle wissen, ist

die Abkürzung für viele andere Eigenschaften (die Reihenfolge ist für mich immer schwer zu erinnern). Eines der Eigenschaften ist animation, die wie Ryan erkl?rt: animation-composition

Die Definition des CSS -Attributs legt auch den "Basis" -Wert des Attributs fest. Standardm??ig ignorieren Keyframe -Animationen die zugrunde liegenden Werte, da sie nur die in der Animation definierten Effektwerte berücksichtigen. Keyframes erstellen einen Effektwertstapel, der die Reihenfolge bestimmt, in der Animationen dem Browser pr?sentiert werden. Zusammengesetzte Operationen sind die Art und Weise, wie CSS die Kombination aus grundlegenden Effekten und Keyframe -Effektwerten verarbeitet.

Manuel Matuzovi? und Robin Rendle haben auch wunderbare Erkl?rungen für das Grundstück, die uns dazu veranlassten, Almanac zu aktualisieren.

unterstützt drei Werte, um den Basisattributwert zu ersetzen oder Operations- oder Akkumulationsvorg?nge im Basisattributwert auszuführen. Unter ihnen ist der Wert "Add" am interessantesten, weil er: animation-composition kann

[kombiniert den Effektwert des Keyframe mit dem Basis -Attributwert, um eine neue Farbe zu erstellen.

background-color

Nehmen wir ein Beispiel:

Wie Sie sehen k?nnen, mischt der Wert "Hinzufügen" sie beim übergang zwischen den beiden Farben. Beachten Sie, dass dieser übergang viel glatter ist als der Wert "Ersatz", obwohl das, was Sie am Ende mit der 100% igen Marke erhalten, eine v?llig neue Farbe ist, nicht die, die wir im Keyframe deklarieren. Wenn wir die Animation zu irgendeinem Zeitpunkt pausieren, k?nnen wir dann neue Farbwerte daraus extrahieren?

ryan hat diese Animation gestaltet und über ein Element schwebte, wird die Animation pausieren. Wenn wir Devtools ?ffnen und die Pseudoklasse

erzwingen, k?nnen wir vielleicht den neuen Farbwert auf der Registerkarte "Computer" erhalten.

Interessanterweise haben wir einige RGB -Conversions. Dies liegt wahrscheinlich daran, dass die Aktualisierung des Farbkanals einfacher ist, als eine Sechskantfarbe in eine andere zu konvertieren? Browser machen etwas Kluges. :hover

Ich m?chte jetzt meine alte Farbinterpolation -Demo aktualisieren ...

Nun, es sieht meiner Meinung nach nicht anders aus. Vielleicht liegt es nur daran, dass wir den Hue -Kanal der HSL ge?ndert haben und die ?nderungen sehr subtil sind. Wie auch immer,

kann neue berechnete Farbwerte erzeugen. Was brauchen Sie zu diesen Werten? Ich wei? nicht, aber benutze deine Fantasie in vollen Zügen!

Das obige ist der detaillierte Inhalt vonFarbmischung mit Animationskomposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!