共计 2903 个字符，预计需要花费 8 分钟才能阅读完成。
欢送关注我的公众号：前端侦探
在上一篇 CSS 如何依据背景色主动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在肯定局限性，比方：如果是背景是渐变色该怎么办？
很容易想到的思路是将两个渐变色取过渡中间色，而后再通过后面的形式转换就行了
那么问题来了，有没有方法通过 CSS 实现两头色彩的获取呢？明天来一起探讨这个问题，聊一聊对于色彩合成的相干技巧。
一、你可能不晓得 CSS 动画小技巧
想必大家都用过 CSS 动画，比方
@keyframes color {
from {color: yellow}
to{color: deeppink}
}
.text{animation: color 1s linear forwards;}这样就失去了一个色彩从 yellow 到deeppink的动画
这个没什么好说的。
默认状况下，动画会播放 1 次后完结，而后设置了forwards，会保留在最初一帧状态。
那么，如果动画只播放一半，是不是就正好处于两者色彩的两头 ？其实， 播放次数也能够是小数的 ，比方能够将播放次数设置为0.5 次，就像这样
.text{animation: color 1s .5 linear forwards;}成果如下
因为只播放了一半，所以到两头的橙色就进行了下来。
值得一提的是，通过这种形式失去的色彩，也是能够用 JS 去获取的
那么，利用这个个性，能够实现色彩的各种合成成果。
二、突变背景下的文本自适应
回到后面的问题，如果是突变背景，该如何实现主动切换黑白文字呢？
假如突变的两种色彩别离是 --c1 和--c2，
<div class="box" style="--c1: #ffeb3b; --c2: deeppink">
<span class="txt"> 前端侦探 </span>
</div>那么依据上一节的办法，能够将动画革新成这样
@keyframes color {
from {color: var(--c1)
}
to{color: var(--c2)
}
}咱们这里只是须要获取一下色彩，并不需要动画，所以能够将动画时长设置为很小的一个数，比方0.001s
.txt{animation: color .001s .5 linear forwards;}这样文字色彩就主动变成了突变色彩的两头值，如下
而后再利用滤镜，将文字转换成彩色或者红色
.txt{
animation: color .001s .5 linear forwards;
filter: grayscale(1) contrast(9999) invert(1);
}成果如下
也能完满适配任意渐变色
残缺代码能够查看以下任意链接
- CSS auto-gradient-color (codepen.io)
- CSS auto-gradient-color (runjs.work)
三、色彩的加深和减淡
再来看一个更加实用的例子，色彩的加深和减淡。通常用于主题色的生成，比方给定一个主题色，生成一系列和它相匹配的邻近色。上面是色彩逐步减淡，最终变为红色的色阶图
依据下面的原理，能够很轻易的实现这样一个成果
假如 HTML 是这样的，每个方块给一个不同的 CSS 变量--l
<div class="box" style="--l:0"></div>
<div class="box" style="--l:0.2"></div>
<div class="box" style="--l:0.4"></div>
<div class="box" style="--l:0.6"></div>
<div class="box" style="--l:0.8"></div>
<div class="box" style="--l:1"></div>而后创立一个 从主题色到红色的动画，依据这个变量，让动画执行不同的次数
.box{animation: lighterBackgroundColor .001s var(--l) linear forwards;
}
@keyframes lighterBackgroundColor {
from {background-color: var(--primary-color)
}
to{background-color: #fff}
}这样就能够生成同种色彩，不同深浅度的主题色了
有同学可能会说像 sass、less这些不也能实现吗？其实不然，这些都是预处理器，生成当前就不能再变了，而这种形式是实时绘制的，能够实现批改，如下
残缺代码能够查看以下任意链接
- CSS lighten (codepen.io)
- CSS lighten (runjs.work)
如果将这种技巧用到理论我的项目中也是十分完满，上面是不同主题色下的预览成果
选中背景色就是减淡 80% 后的色彩
.item.current{border-color: var(--primary-color);
animation: lighterBackgroundColor .001s .8 linear forwards;
}原理是完全相同的，这里就不具体介绍了，残缺代码能够查看以下任意链接
- CSS color-mix (codepen.io)
- CSS color-mix (runjs.work)
除此之外，依据需要，还能够通过色彩透明度的变动来生成特定透明度的主题色
@keyframes OpacityBackgroundColor {
from {background-color: var(--primary-color)
}
to{background-color: rgba(0,0,0,0)
}
}四、将来最期待的几个色彩处理函数
官网也看到了这种需要，因而在 CSS Color Module Level 5 中起草了几个对于色彩合成的函数，这里简略介绍一下
首先是颜色混合color-mix，将两种色彩依照肯定的比例进行交融
color-mix(in srgb, white, blue);这示意 white 和blue依照各自 50% 进行混合，最终会失去紫色rgb(50% 50% 100%)
如果要管制混合比例，能够这样
color-mix(in srgb, white 20%, blue);还有一个叫做绝对色彩relative color ，其实是对原有的色彩函数进行了补充，依据我的了解，能够将这个个性设想成 JS 中的解构赋值
hsl(from var(--accent) h s calc(l - 20%))例如这个示意将色彩 --accent 分解成 h、s、l 三个变量，而后对其中的l，也就是亮度缩小20%，也就达到了色彩变暗的目标
如许令人兴奋的个性！目前这两个个性仅在 safari 15+试验性功能开启反对（😂终于不拖后腿了）
五、总结一下
以上就是本文全部内容了，次要是利用 CSS 动画的过渡个性，间接达到了颜色混合的目标，上面是一些要点：
- CSS 动画的次数也能设置成小数，比方 0.5 示意动画只运行到一半
- 两个色彩的中间色就是色彩动画运行到一半的状态
- 色彩减淡能够看成是主题色到红色的动画，加深则是彩色
- 官网曾经正在起草 CSS 色彩合成相干函数，目前仅 Safari 试验性反对
你学会了吗？总的来说，在 color-mix 到来之前，这样一个小技巧还算是不错的解决方案。最初，如果感觉还不错，对你有帮忙的话，欢送 点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探
