在纯 CSS 中混合颜色

红色 + 蓝色 = 紫色……对吗？

有没有办法在 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 也可以在动画的任何确切点告诉您当前的颜色。

那么，如果我们暂停动画在中间某个位置呢？ 颜色混合就起作用了！ 这是一个暂停的动画，它的持续时间为 1s，而暂停时间为 0.5s，因此正好处于中间位置

我们通过设置 animation-delay 为 -0.5s 来实现这一点。 那么，红色和蓝色之间的中间色是什么？ 紫色。 我们可以调整 animation-delay 来指定两种颜色的百分比。

这适用于 Chromium 内核浏览器和 Firefox。 在 Safari 中，您必须更改 animation-name 以强制浏览器重新计算动画进度。

此技巧还可以用于为颜色添加 alpha 通道，这通常对主题非常有用。

将混合颜色获取到 CSS 自定义属性

到目前为止，这是一个很酷的技巧，但它在实践中不太实用，因为您需要对要使用混合颜色的任何元素应用动画，然后必须在 @keyframes 中设置所有要更改的属性。

如果我们添加几个 CSS 功能，我们可以对此进行改进

1. 使用 @property 类型的 CSS 自定义属性，这样它就可以创建为适当的颜色，从而可以作为颜色进行动画处理。
2. 使用 Sass @function 来轻松地在特定点调用关键帧。

现在我们仍然需要调用动画，但结果是更改了一个自定义属性，我们可以将其用于任何其他属性。