使用CSS动画实现颜色加深、减淡等混合操作

时间：2023-03-14 14:25:52 科技观察

上一篇文章CSS如何根据背景颜色自动切换黑白文字？，描述了一些文字自适应背景色的小技巧，但是还是有一些局限性，比如：背景是渐变色怎么办？很容易想到的思路就是取两种渐变色的过渡中间色，然后按照前面的方式进行转换。那么问题来了，有没有办法通过CSS获取中间色呢？下面我们一起来讨论一下这个问题，说说色彩合成的相关技巧。1、你可能不知道CSS动画技巧。CSS动画大家一定用过，比如@keyframescolor{from{color:yellow}to{color:deeppink}}.text{animation:color1slinearforwards;}把颜色从黄色动画到deeppink。对此无话可说。默认情况下，动画播放一次就结束，再设置forwards，会一直停留在最后一帧状态。那么，如果动画只进行到一半，不就在两种颜色的中间吗？其实播放次数也可以是小数，比如你可以设置播放次数为0.5次，像这样。.text{animation:color1s.5linearforwards;}效果如下：由于动画只播放了一半，所以中间的橙色停止了。值得一提的是，通过这种方式获取的颜色也可以用JS获取。然后，利用这个特性，可以实现各种颜色的合成效果。2.渐变背景下的文字适配回到上一个问题，如果是渐变背景，如何自动切换黑白文字？假设渐变的两种颜色是--c1和--c2。前端侦探

然后按照里面的方法上一节，动画可以重新设计成这样。@keyframescolor{from{color:var(--c1)}to{color:var(--c2)}}我们这里只需要获取颜色即可，不需要动画，所以可以设置动画时长是非常小的一个数字，比如0.001s。.txt{animation:color.001s.5linearforwards;}这样文字颜色会自动变成渐变色的中间值，如下：然后应用滤镜将文字转为黑色或白色。.txt{动画：颜色.001s.5线性向前；filter:grayscale(1)contrast(9999)invert(1);}效果如下：同样可以完美适配任何渐变色。完整代码可以在以下任意链接查看CSSauto-gradient-color(juejin.cn)[1]CSSauto-gradient-color(codepen.io)[2]CSSauto-gradient-color(runjs.work)[3]三、颜色加深和淡化我们来看一个更实际的例子，颜色加深和淡化。通常用于主题色的生成，比如给定一个主题色，生成一系列与其相匹配的相邻颜色。下面是颜色逐渐变白的色标图。根据以上原理，很容易实现这样的效果。假设HTML是这样的，每个方块被赋予不同的CSS变量--l。