直播平台开发，实现统一按钮点击背景切换

在直播平台开发时，我们可以利用使用 CSS 相对颜色，实现统一按钮点击背景切换。
通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。

像是这样：

 

最常见的写法，就是我们需要在 Normal 状态、Hover 状态、Active 状态下写 3 种颜色：

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 伪类下为 B 颜色 */
p:hover {
    color: #ffd21f;
}
/** Active 伪类下为 C 颜色 **/
p:active {
    color: #ab8a05;
}

在之前，我们介绍过一种利用滤镜 filter: contrast() 或者 filter: brightness() 的统一解决方案，无需写多个颜色值，可以根据 Normal 状态下的色值，通过滤镜统一实现更亮、或者更暗的伪类颜色。

在今天，我们也可以利用 CSS 相对颜色来做这个事情：

div {
    --bg: #fc0;
    background: var(--bg);
    transition: .3s all;
}

div:hover {
    background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
    background: hsl(from var(--bg) h s calc(l * 0.8));
}

我们通过 hsl 色相、饱和度、亮度颜色表示法表示颜色。实现：

在 :hover 状态下，根据背景色，将背景亮度 l 调整为原背景色的 1.2 倍
在 :avtive 状态下，根据背景色，将背景亮度 l 调整为原背景色的 0.8 倍
在实际业务中，这是一个非常有用的用法。

以上就是直播平台开发，使用 CSS 相对颜色，实现统一按钮点击背景切换， 更多内容欢迎关注之后的文章