CSS相对颜色：点击/覆盖（hover/active）文字颜色自动适配背景色~

什么是CSS 相对颜色？

CSS 相对颜色(CSS relative color)是CSS Color Level 5的新特性,它可以将一个颜色以某种颜色格式进行分解、重组,从而得到一个全新的颜色。

使用 CSS 相对颜色，实现统一按钮点击背景切换:

通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互

效果如下：

核心功能：

让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。

一张图快速入门 CSS 相对颜色语法：

CSS相对颜色例子：

HTML结构

<div>Button</div>
<div>Button</div>
<div>Button</div>

CSS样式代码：

div {
position: relative;
margin: auto;
width: 200px;
height: 64px;
line-height: 64px;
font-size: 32px;
border: 1px solid #000;
text-align: center;
background: var(–bg);
cursor: pointer;
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));
}

div:nth-child(1) {
–bg: #fc0;
}

div:nth-child(2) {
–bg: #CDDC39;
}

div:nth-child(3) {
–bg: #82d8ff;
}

效果如以上，CSS的新功能是不是很强大呀！需要的可以免费下载示例学习和测试奥~