Farbmischung mit Animationskomposition

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!