css- 文字充电效果

前言

上年 Apple 推出了搭载 M2 芯片的新款 MacBook Pro 和 MacBook Air，得到消息第一时间也是去 Apple 官网看看介绍，看看他们的产品网页，这次没有什么特别的，但是有个电池续航 20 小时的文字有一个充电的效果

今天就来实现这个充电的效果，并且使用到了 CSS 的新函式 clamp()

实现充电效果

在 HTML 部分使用乱数假文自动生成随机文本

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>

然后加入 body 选择器，用 Flexbox 的方法将内容上下左右居中，设定背景颜色为黑色

body{  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background-color: #000;}

然后加入 h1 选择器，文字先设为白色，宽度设为 50%，将字距收窄一点，使用 letter-spacing 设为-3px

h1{  color: #fff;  width: 50%  margin: 0 auto;  font-family: Helvetica;  font-size: 60px;  letter-spacing: -3px;}

要做到充电的效果关乎到两个颜色，白色和绿色，这里使用 linear-gradient()去达到

h1 选择器加入 background-image（渐层颜色是套用 background-image 而不是 background-color），使用 linear-gradient()，先设定白色 50%，然后绿色 50%

h1{  background-image: linear-gradient(#fff 50%,#4cd265 50%);}

然后加上background-clip: text，以文字作为遮罩，再将文字设为透明色color: transparent

h1 选择器定义一个 CSS 变量 --progress：0，在 0 的时候文字是全白色，1 的时候是全绿色，然后将两个 50%的值替换成 calc()计算，将--progress 改为 0.5 看看效果

--progress:0.5;
background-image: linear-gradient(#fff calc(100% - calc(var(--progress) * 100%)),#4cd265 calc(100% - calc(var(--progress) * 100%)));

但是就这样效果就有点寡，在充满电的时候将文字放大一些，放大使用transform：scale（1.3），充电的完成度完全由--progress 控制，当--progress 小于 1 的时候 scale()设为 1，等于 1 的时候 scale()设为 1.3，但是 css 没有 if 判断式可以用

这里使用一个新的 css 函式 clamp()，这个函式接收三个值，第一个值最小值，我们填 1，第三个值最大值，我们填 3，而第二个值，如果少于 1 的话结果就是 1，如果大于 1.3 结果就是 1.3，如果在 1 和 1.3 之间的话，结果就是第二个值设定值

假设每次充电都加 0.01，即 100 充满电，通过 calc()，var(--progress)-0.99 再乘一个比较大的值，--progress 在 0.99 或以下的时候 scale()为 1，--progress 为 1 时 scale()为 1.3，再加入一个动画的过渡

transform: scale(clamp(1,calc((var(--progress)-0.99) * 200),1.3));transition: .3s transform ease-out;

最后，就是处理触发动画的部分了，定义一个变量 progress，然后定义一个 run 函数，里面判断如果 progress 少于 1 的话 progress 加 0.01，为了确保计算的精度准确，先用 toFixed(2)转换为两个小数位再用 parseFloat()转换为数字，然后通过 setProperty()将 progress 设定到 css 变量中，再加一个 setTimeout()，每隔 20 毫秒就执行一次 run 函数

let progress=0function run(){  if(progress<1){    progress=parseFloat((progress + 0.01).toFixed(2))    document.querySelector('h1').style.setProperty('--progress',progress)    console.log(progress);    setTimeout(run, 20);  }}run()

看看最终效果