说说CSS变量自动换色技术

偶尔在网上看到这样的设计。当阅读量比较小的时候，文字是灰色的。当阅读量比较大（>=100）时，文字变成棕色。示意图效果如下：是不是很醒目？另外还有一个可以根据进度自动变色的进度条，如下：其实这样的逻辑判断也可以通过纯CSS实现，主要是利用CSS变量和边界值计算。下面分享一下：1.基本数学原理CSS中没有直接的if判断逻辑。要达到这样的效果，就需要充分利用CSScalc的计算特性和临界条件。假设要实现这样一个逻辑：--x的默认值为10，当变量--y大于等于100时，--x变为20，如何实现呢？这里先给出答案，再分析：--x:clamp(10,(var(--y)-99)*99,20)这里用到了clamp函数，可以理解为区间，有3个值[Min,Val,Max]，前面和后面分别是最小值和最大值，中间是动态值。这其实是一个简单的线性函数，而且是单调递增的，所以这里的逻辑是：当--y小于100的时候，比如99，(var(--y)-99)*99的计算结果为0，再小则为负数。取区间[10,20]中较小的值，所以最终结果为10。当--y大于等于100时，如100，(var(--y)-99)的计算结果*99就是99，在区间[10,20]中取较大的值，所以最后的结果是20。用一张图表达如下：这里为什么要乘以99？它实际上是一个放大的插值操作。严格来说，本例中只要大于20就可以了。乘以20后，范围变成...,-20,0,20,40,...也包括区间[10,20]。这就是CSS中if判断的基本原理。使用了一点数学运算。接下来我们来看看实战效果。2.首先通过饱和度的变化做一个简单的布局；由于纯CSS无法获取值的大小，需要使用CSS变量进行计算，所以HTML可以这样。1阅读99阅读102reading如果不考虑HTML语义或SEO等因素，这里的“numbers”和“reading”可以传递通过伪元素来生成；num::before{计数器重置：numvar(--num);content:counter(num);}num::after{content:'reading';}因此，HTML可以进一步简化为：简单修改后的效果如下：由于是灰色和棕色之前的变化，简单的方法就是控制它通过饱和。比如这里棕色的颜色是#aa540e，用hsl颜色表示为hsl(27,50%,36%)，如下：这里的Saturation控制颜色的鲜艳程度。饱和度越高，颜色越亮，饱和度越低，颜色越暗。当饱和度降到0时，就完全变成灰色了，如下：所以，这里要在两种颜色之间切换，可以计算饱和度，具体规则是。当--num大于等于100时，饱和度为85%，否则为0%，利用上一节的基本原理，所以实现。num{--s:clamp(0%,(var(--num)-99)*99%,85%);/*>100*/颜色：hsl(27var(--s)36%);}逻辑同上，这里不再赘述。实际效果如下：Kapture2022-04-21at15.55.20由于饱和度本身也有一个“阈值”，当饱和度低于0%时，仍然渲染为0%，所以上面的实现可以去掉最小值，简化如下：num{--s:min((var(--num)-99)*99%,85%);color:hsl(27var(--s)36%);}也可以达到同样的目的。3、完整的色彩控制虽然饱和度的变化控制比较容易，只需要控制一个参数，但还是有一定的局限性。首先，这个灰色可能不是设计师想要的灰色（实际上可能会稍微浅一点）。而且，换色不够自由。比如默认是蓝色，一定量后变成红色。控制住。因此，我们需要以完全解析的方式来实现它。原理是控制颜色的三个参数，要么rgb，要么hsl，假设两种颜色分别为rgb(29125250)和rgb(2446754)，如下：不仅有递增的变化，还有递减的变化（例如125=>67,250=>54），所以计算calc时需要取反。具体实现如下：num{--r:clamp(29,(var(--num)-99)*999+29,250);/*29,250*/--g:clamp(67,(var(--num)-100)*-999+67,125);/*128,67*/--b:clamp(54,(var(--num)-100)*-999+54,250);/*250,54*/color:rgb(var(--r)var(--g)var(--b));}注意点：系数要足够大，这里是999,比如第一项,当--num为100时,如果系数为99,那么计算结果为99+29,没有达到最大值250,所以需要改大一点的值,比如999。clamp支持的参数必须是[min,val,max]，并且min和max不能调换，所以上面的代码在实现的时候调换了。实际效果如下：Kapture2022-04-21at16.43.244.自动改变背景颜色虽然通过上述方法可以自动改变颜色，但还是有些不雅。代码量比较大，有些繁琐，容易混淆，尤其是前后数字的顺序。仅适用于两种颜色的变化，例如多段颜色，可能是不可能的。与纯色相比，背景在多层叠加上有非常大的优势。如果你控制了每个背景的大小，你能控制最终显示的颜色吗？还是上面的例子，我们先通过渐变绘制两层背景，最上面是红色rgb（2446754），最下面是蓝色rgb（29125250），然后通过background控制每一层的大小-尺寸。原理是这样的：具体实现如下：num{background:linear-gradient(rgb(2446754),rgb(2446754)),linear-gradient(rgb(29125250),rgb(29125250));颜色：#fff；background-size:calc((var(--num)-99)*100%),100%;}其实这个计算很简单，解释一下：当--num大于等于100时，计算结果必须大于100%，所以上面的红色背景是可见的，整体呈现红色。当--num小于100时，计算结果必须小于等于0%。即使是负数，background-size解析为0%，所以上面的红色背景是看不见的，下面整体表现为蓝色。实际表现如下：Kapture2022-04-21at18.19.56如果想改变文字颜色，可以使用background-clip。num{背景：线性渐变（rgb（2446754），rgb（2446754）），线性渐变（rgb（29125250），rgb（29125250））;颜色：透明；背景大小：calc((var(--num)-99)*100%),100%;-webkit-background-clip:text;}Kapture2022-04-21at18.29.38比上面的方法简单多了么？5.自动变色进度条背景也可以适配多种颜色。接下来我们看文章开头的一个案例，实现这样一个可以自动变色的进度条。有几个规则：当进度低于30%时，背景为红色。当进度大于30%且小于60%时，背景为橙色。当进度大于60%小于90%时，背景为蓝色。当进度大于90%时，背景为绿色。原理图如下：假设HTML如下：