CSS实现简单的变色动效判断

Herozzq
305 阅读3分钟

我们在实际的开发过程中可能会遇到一些页面变色效果，需要一些简单的判断。虽然用JS来实现非常简单，但是如果能用CSS来替代岂不是更加的优雅？

案例1

比如下面这种场景，某个数据大于一定值之后开始变色。

image.png

场景分析

要实现这个效果，我们需要用完全解析的方式来实现，原理其实就对颜色的 3 个参数进行控制，rgb 或者 hsl 都可以，假设两个颜色分别是rgb(29 125 250)和rgb(244 67 54)，原理如下

image.png 这里不仅有递增的变化，也有递减的变化（比如，125 => 67、250 => 54），所以在 calc 计算的时候需要取反，具体实现如下

这里先普及一下clamp（min val  max）函数的作用，是将一个值限制在一个上限和下限之间，当这个值超过最大或最小范围时，会在这两个值中选一个使用，它接收三个参数：最小值，首选值，最大值

<h3 style="--num:50">50<span>阅读</span></h3>
<h3 style="--num:102">102<span>阅读</span></h3>

<style>
  h3{
    --r: clamp(29, (var(--num) - 99) * 999 + 29 , 250);/*29, 250*/
    --g: clamp(67, (var(--num) - 100) * -999 + 67 , 125);/*125, 67*/
    --b: clamp(54, (var(--num) - 100) * -999 + 54 , 250);/*250, 54*/
    color: rgb(var(--r) var(--g) var(--b));
}
</style>

我们首先用--来声明RBG三个变量，然后给color的rbg赋值这三个变量，再通过clamp函数来实现值的判断选择

在实现的时候需要注意几点：

  • 系数需要足够大，这里是 999，比如第一条，当 --num 为 100 时，如果系数是 99，那么计算的结果是 99 + 29，没有达到最大值 250，所以需要改大一点，比如 999

  • clamp 支持的参数必须是 [min, val, max]，min 和 max 不能 对调，所以以上代码在实现时做了交换

浏览器兼容性

image.png

案例2

我们再来看一个自动变色进度条的案案例

以下是进度条的四种状态,下面我们来尝试使用纯css来实现一下

image.png

思路解析

总体思路是通过 CSS 伪类和计数器将 CSS 变量显示在页面，首先，还是将几个颜色通过渐变绘制出来，最后的颜色放在最前面，然后根据 CSS 变量控制背景尺寸就行了。

<div class="bar" style="--percent: 50;"></div>

<style>
  .bar {
  width:1000px;
  display: flex;
  height: 20px;
  background-color: #f5f5f5;
}
.bar::before {
  counter-reset: progress var(--percent); // 创建计数器
  content: counter(progress) '%\2002'; // 显示计数器内容
  display: flex;
  justify-content: end;
  width: calc(var(--percent) * 1%);
  font-size: 12px;
  color: #fff;
  background: #2486ff;
  white-space: nowrap;
  
  background-image: linear-gradient(green,green), 
    linear-gradient(#2486ff,#2486ff), 
    linear-gradient(orange, orange),  
    linear-gradient(red, red);
  background-size: calc( (var(--percent) - 90) * 100% ) 100%, 
    calc( (var(--percent) - 60) * 100% ) 100%,
    calc( (var(--percent) - 30) * 100% ) 100%,
    100% 100%;
}
</style>

我们来挨个梳理一下代码逻辑

  1. 当 --percent 大于 90 时，所有背景的尺寸都是 100%，自然显示最上层的绿色

  2. 当 --percent 大于 60 ，小于等于 90 时，只有最上层的绿色尺寸是 0，其他背景尺寸都是 100%，所以显示第二层的蓝色

  3. 当 --percent 大于 30 ，小于等于 60 时，上面两层背景尺寸都是 0，下面两层背景尺寸都是 100%，所以显示第三层的橙色

  4. 当 --percent 小于 30 时，只有最底层的尺寸是 100%，其他都是 0，所以显示最底层的红色

总结

实现以上效果的原理都是CSS 变量 和 calc 计算，这种技术不仅仅适用于颜色的变化，只要是数值的变化都可以，比如文章中text-indent的切换，充分利用这些小技巧可以让我们的页面更加灵活，更加精致。

avatar
文章
阅读
粉丝