欢迎来到微信公共帐户：前端 - 侦探
引入一个提示，该技巧可以通过CSS变量自动更改样式?
有时我会在互联网上看到这样的设计。当阅读量相对较小时，文本为灰色。当阅读量更多（> = 100）时，文本变成棕色。
它是非常捕捉的吗？
此外，还有一个可以根据进度自动更改的进度栏，如下
实际上，这种逻辑判断也可以通过纯CSS来实现。CSS变量和边界值主要使用。现在分享
如果要达到这样的效果，则没有直接的判断逻辑，必须充分利用CSS CALC的计算特征和关键条件。
假设您想实现这样的逻辑：
默认值为10，当变量大于或等于100时，它变为20
如何实现它？答案首先在这里给出，然后分析
此功能在这里使用。您可以将其理解为间隔。有3个值。最小值和最大值是前后的。中间是动态值。这实际上是一个简单的线性函数，并且已单调化。因此，这里的逻辑是：
使用如下的图片
为什么我需要在这里乘以99？实际上，这是扩大插值的操作。严格来说，只要在此示例中大于20，它将成为20之后[10，20]的范围。
这是CSS判断的基本原则。我使用一些数学操作。接下来，查看实际战斗效果
首先，只需布局
因为纯CSS无法获得值的大小，因此必须使用CSS变量在此处计算，因此HTML可以
如果您不考虑诸如HTML语义或SEO之类的因素，则可以通过伪元素生成“数字”和“阅读”来生成
因此，可以进一步简化HTML
简单修改后的效果如下
由于以前的灰色和棕色变化，一种简单的方法是通过饱和度控制。例如，这里的棕色是它由HSL颜色表示。
这里的饱和度可以控制颜色的亮度。饱和度越高，颜色越亮，饱和度越小，颜色越深。当饱和度降至0时，它变成彻底的灰色
因此，可以实现两种颜色的切换。您可以计算饱和度。具体规则是
当它大于或等于100时，饱和度为85％，否则为0％。使用了上一节的基本原则，因此实现是
逻辑与正面一致，这不会重复，实际效果如下
由于饱和度本身也具有“阈值”，当饱和度低于0％时，仍将其呈现为0％，因此可以将最大值在上方删除。
可以实现相同的目的
尽管饱和度更改相对容易控制，但仅需要控制一个参数，但仍然受到限制。首先，这种灰色可能不是设计师想要的灰色（实际上可能更轻）。此外，颜色变化不够自由。例如，默认值为blue.control。
因此，我们需要以完全分析的方式实施。该原理实际上控制着颜色的三个参数，或两者兼有。
这里不仅有在增加的变化，而且还会减少变化（例如，125 => 67，250 => 54），因此计算计算时需要反转。具体的实现如下。
需要注意：
实际效果如下
尽管颜色可以自动通过上述方式更改，但仍然有点不足
与简单的颜色相比，背景在多层次叠加中具有很大的优势。如果每个背景的大小都受到控制，您可以控制最终的显示颜色吗？
仍然是上面的示例，我们首先通过逐渐变化绘制两层背景，上面是红色，以下是蓝色，然后穿过
为了控制每一层的大小，原理就是这样
具体实现如下
实际上，该计算很简单，解释：
实际表现如下
如果要实现文本颜色的更改，可以使用它
它比上面的方式容易吗？
背景也可以适用于多种颜色。接下来，查看文章开头的情况，以意识到可以自动更改颜色的进度栏。有几个规则：
如下所示
假设HTML如下
您可以通过CSS Pseudo -Pseudo类和计数器在页面上显示CSS变量。如果您有兴趣，可以通过Zhang Xinxu老师阅读本文：小提示：如何在内容属性的帮助下显示CSS VAR变量值（此情况也可以在此基础上修改）），只需修改
效果如下
那么如何根据进度自动更改颜色？
原理仍然相似！首先，颜色仍然是通过几种颜色绘制的，最后的颜色放在最前沿，然后根据CSS变量控制背景大小的背景大小。原则如下：
由于有一个边界限制，当它小于0％时，它仍将呈现为0％，因此可以在此处使用它来限制它以减少代码量。特定的代码实现就是这样
简要介绍一下内部的逻辑：
实际表现如下
背景自动变色已经实现，但是这个数字有一个小问题。当进度条相对较小时，显然不允许百分比，如下
因此，在这种情况下，百分比的数字应在外面和红色移动。
可以通过属性来实现外部。文本的颜色从白色变为红色（），可以通过亮度实现。当亮度为100％时，任何颜色都会变为白色。由于亮度本身是有限的，因此当它超过100％时，它应该超过100％。在时间时，它仍会根据100％的使用，可以使用，并且具体实现如下。
这里的计算原理与以前相同，每个人都可以在这里考虑。
实际效果如下：
可以看出，当百分比小于10时，文本就在外面，这避免了空间不足并且非常聪明。
可以访问完整的代码：CSS自动颜色（codepen.io）
以上是CSS自动变色技术的全部内容。核心实际上是边界值的灵活计算。它功能非常强大吗？总结以实现要点：
当然，这项技术不仅适用于颜色的变化。只要它是价值变化，例如在文章中切换，充分利用这些技巧就可以使我们的页面更加灵活，更精致。在本文中，如果您认为这还不错，这对您有帮助，请欢迎喜欢，收集和转发???
欢迎来到微信公共帐户：前端 - 侦探
原始：https：//juejin.cn/post/7103402278308675620