在純CS中混合顏色

紅加藍等於紫……對吧？

如何在CSS 中表達這一點呢？不容易。雖然有一個關於color-mix 函數的提案草案，並且Chrome 也表現出一定程度的興趣，但這似乎並非近在眼前。擁有原生的CSS 顏色混合功能將會很棒，因為它會在設計師處理顏色時提供更大的靈活性。例如，可以創建一個單一基色的色調變體來形成設計調色板。

但這是CSS-Tricks，所以讓我們來做一些CSS 技巧。

我們在CSS 中有一個calc() 函數用於操作數字。但是，我們幾乎沒有辦法直接操作顏色，即使某些顏色格式（例如hsl() 和rgb()）是基於數值的。

使用動畫混合顏色

我們可以使用CSS 在一種顏色和另一種顏色之間進行過渡。這有效：

 div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  background: red;
}

以下是使用動畫的示例：

 div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  animation: change-color 0.2s forwards;
}

@keyframes change-color {
  to {
    background: red;
  }
}

這是一個無限運行的關鍵幀動畫，您可以看到顏色在紅色和藍色之間移動。打開控制台並單擊頁面——即使是JavaScript 也可以在動畫的任何精確點告訴您當前的顏色。

那麼，如果我們在動畫的中間暫停呢？顏色混合有效！這是一個暫停的動畫，其1 秒的持續時間為0.5 秒，所以正好是中途：

我們通過設置-0.5s 的animation-delay 來實現這一點。紅色和藍色之間一半的顏色是什麼？紫色。我們可以調整animation-delay 來指定兩種顏色的百分比。

這適用於Chromium 內核瀏覽器和Firefox。在Safari 中，您必須更改animation-name 以強制瀏覽器重新計算動畫進度。

此技巧也可用於向顏色添加alpha 通道，這通常對主題設計很有用。

將混合顏色添加到CSS 自定義屬性

到目前為止，這是一個巧妙的技巧，但將動畫應用於您需要使用混合顏色的任何元素，然後必須在@keyframes 中設置所有您想要更改的屬性，這並不實用。

如果我們添加幾個CSS 功能，我們可以改進這一點：

1. 使用@property 類型的CSS 自定義屬性，以便可以將其創建為適當的顏色，從而可以將其作為顏色進行動畫處理。
2. 使用Sass @function 來輕鬆地在特定點調用關鍵幀。

現在我們仍然需要調用動畫，但結果是我們可以將自定義屬性用於任何其他屬性。

以上是在純CS中混合顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！