在纯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中文网其他相关文章！