社区精选 | 让CSS计数器支持小数的动态变化？

业界 作者：SegmentFault 2022-09-07 18:24:49 阅读：1008

今天小编为大家带来的是社区作者 XboxYan 的文章，让我们一起来学习用 CSS计数器实现小数的动态变化。

不得不说，CSS 计数器是个好东西。

最近在几篇文章中都用到了 CSS 计数器，可以将 CSS 变量通过伪元素content动态展示出来，还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章：

• 还在使用定时器吗？CSS 也能实现电子时钟
  https://segmentfault.com/a/1190000041661094
• 动画合成小技巧！CSS 实现动感的倒计时效果
  https://segmentfault.com/a/1190000042094549
• 自定义计数器小技巧！CSS 实现长按点赞累积动画
  https://segmentfault.com/a/1190000042360785

count::before {
      --percent: 50;
    counter-reset: progress var(--percent);
    content: counter(progress);
}

count::before {
      --percent: 50.15;
    counter-reset: progress var(--percent);
    content: counter(progress);
}

一、CSS 原理拆解

count::before {
  --整数: 48;
  --小数: 69;
  counter-reset: 整数计数器 var(--整数) 小数计数器 var(--小数);
  content: counter(整数计数器) "." counter(小数计数器);
}

二、CSS变量拆分成整数和小数

count::before {
  --percent: 48.69;
  --整数: 48;
  --小数: 69;
  counter-reset: 整数计数器 var(--整数) 小数计数器 var(--小数);
  content: counter(整数计数器) "." counter(小数计数器);
}

• <length>
• <number>
• <percentage>
• <length-percentage>
• <color>
• <image>
• <url>
• <integer>
• <angle>
• <time>
• <resolution>
• <transform-function>
• <custom-ident>
• <transform-list>

• <number>表示任意的数字，整数和小数都可以
• <integer>表示整型数字，只能是整数，小数会认为不合法

@property --整数 {
  syntax: "<integer>"; /*整型*/
  initial-value: 0;
  inherits: false;
}

@property --整数 {
  syntax: "<integer>"; /*整型*/
  initial-value: 0;
  inherits: false;
}

count::before {
  --percent: 48.69;
  --整数: calc(48.69);/*使用 CSS 计算后可以转换成整数*/
  --小数: 69;
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  content: counter(整数) "." counter(小数);
}

@property --整数 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
count::before {
  --percent: 48.69;
  --整数: calc(var(--percent) - 0.5);
  --小数: 69;
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  content: counter(整数) "." counter(小数);
}

@property --小数 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
count::before {
  --percent: 48.69;
  --整数: calc(var(--percent) - 0.5);
  --小数: calc((var(--percent) - var(--整数)) * 100 - 0.5);
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  content: counter(整数) "." counter(小数);
}

count::before {
  --percent: 48.69;
  --整数: calc(var(--percent) - 0.5);
  --小数: calc((var(--percent) - var(--整数)) * 100 - 0.5 + 0.01);
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  content: counter(整数) "." counter(小数, decimal-leading-zero);
}

三、CSS 变量动画

count::before {
  --percent: 0.4869;
  --百分比: calc(var(--percent) * 100);
  --整数: calc(var(--百分比) - 0.5);
  --小数: calc((var(--百分比) - var(--整数)) * 100 - 0.5 + 0.01);
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  content: counter(整数) "." counter(小数, decimal-leading-zero) "%";
}

count.addEventListener('click', ev => {
  ev.target.style.setProperty("--percent", Math.random());
})

@property --percent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
count{
  /**/
  transition: --percent 1s
}

count{
  /**/
  transition: --整数 1s, --小数 1s;
}

@property --percent {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --整数 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --小数 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
count {
  --percent: 0.4512;
  font-size: 60px;
  font-weight: bolder;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  --百分比: calc(var(--percent) * 100);
  --整数: calc(var(--百分比) - 0.5);
  --小数: calc((var(--百分比) - var(--整数)) * 100 - 0.5 + 0.01);
  counter-reset: 整数 var(--整数) 小数 var(--小数);
  transition: --整数 1s, --小数 1s;
}
count::before {
  content: counter(整数) "." counter(小数, decimal-leading-zero) "%";
}

四、总结和说明

1. CSS 变量不支持直接在content中渲染，但是可以借助计数器初始化来实现
2. CSS 计数器不支持小数初始化
3. CSS 计数器支持小数的实现原理在于将小数拆分为整数、小数点、小数三个部分
4. CSS 自定义变量可以指定变量的类型，这样通过 CSS 数学函数可以将一个小数转换成整数
5. 小数部分可以通过减去整数部分得到
6. 小数部分还需要通过decimal-leading-zero补全位数
7. CSS 单一变量一方面可以带来更好的可维护性，另一方面还可以更轻易地实现过渡动画
8. 借助 @property可以很方便的控制 CSS 变量的过渡和动画