Farben in reinem CSS mischen

Rot und Blau gleich lila ... richtig?

Wie drücke ich das in CSS aus? Nicht einfach. Obwohl es einen Entwurf für die Color-Mix-Funktion gibt und Chrom auch ein gewisses Interesse zeigt, scheint es nicht richtig vor Ihnen zu sein. Das Native CSS -Farbmischen ist großartig, da es mehr Flexibilität bietet, wenn Designer an Farben arbeiten. Zum Beispiel kann eine Tonvariation einer einzelnen Basisfarbe erstellt werden, um eine Designpalette zu bilden.

Aber das sind CSS-Tricks, also machen wir einige CSS-Tricks.

Wir haben eine Calc () -Funktion in CSS zum Manipulieren von Zahlen . Es gibt jedoch wenig Möglichkeit, Farben direkt zu manipulieren, auch wenn einige Farbformate wie HSL () und RGB () numerisch sind.

Mischen Sie Farben mit Animation

Wir können CSS verwenden, um zwischen einer Farbe und einer anderen zu wechseln. Das funktioniert:

 div {
  Hintergrund: Blau;
  Übergang: 0,2s;
}
Div: Hover {
  Hintergrund: Rot;
}

Hier ist ein Beispiel für die Verwendung von Animation:

 div {
  Hintergrund: Blau;
  Übergang: 0,2s;
}
Div: Hover {
  Animation: Wechselfarb 0,2s vorwärts;
}

@keyframes wechseln {{
  Zu {
    Hintergrund: Rot;
  }
}

Dies ist eine unendlich ausgeführte Keyframe -Animation, bei der sich die Farben zwischen Rot und Blau bewegen. Öffnen Sie die Konsole und klicken Sie auf die Seite - Auch JavaScript kann Ihnen die aktuelle Farbe an jedem genauen Punkt in der Animation mitteilen.

Was ist, wenn wir mitten in der Animation innehalten ? Farbmischung funktioniert! Dies ist eine pausierte Animation mit einer Dauer von 0,5 Sekunden für 1 Sekunde. Sie ist also nur auf halbem Weg:

Wir tun dies, indem wir ein Animationsverzögerung von -0,5s festlegen. Was ist die Farbe halb zwischen Rot und Blau? Lila. Wir können das Animations-Zell-Zell anpassen, um den Prozentsatz der beiden Farben anzugeben.

Dies funktioniert mit Chrom -Kernelbrowsern und Firefox. In Safari müssen Sie den Animationsnamen ändern, um den Browser zu zwingen, den Animationsfortschritt neu zu berechnen.

Dieser Trick kann auch verwendet werden, um Farben Alpha -Kanäle hinzuzufügen, was für Themendesigns häufig nützlich ist.

Fügen Sie Mischfarben zu CSS -benutzerdefinierten Eigenschaften hinzu

Bisher ist dies ein cleverer Trick, aber es ist nicht praktikabel, Animation auf ein Element anzuwenden, das Sie für eine gemischte Farbe benötigen, und dann alle Eigenschaften festlegen müssen, die Sie in @KeyFrames ändern möchten.

Wenn wir mehrere CSS -Funktionen hinzufügen, können wir dies verbessern:

1. Verwenden Sie die benutzerdefinierten CSS -Eigenschaften von Typ @Property, damit sie als geeignete Farben erstellt werden können, damit sie als Farben animiert werden können.
2. Verwenden Sie SASS @Function, um Keyframes an bestimmten Stellen problemlos aufzurufen.

Jetzt müssen wir die Animation noch aufrufen, aber das Ergebnis ist, dass wir benutzerdefinierte Eigenschaften für andere Eigenschaften verwenden können.

Das obige ist der detaillierte Inhalt vonFarben in reinem CSS mischen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!