在一个APP中，如果你长按点赞，就会出现这样一个花哨的动画，如下：这个动画由两部分组成，这个随机表情的实现可以参考这篇coco这篇文章巧妙地利用transition实现了短视频app的动画效果。比较类似，这里不再赘述。我们这里要实现的就是这个千变万化的数字动画，如下图：仔细观察，主要有以下交互：鼠标按下时，有向上的动画，抬起时，会慢慢消失.数字不断增加。提示文字达到指定值自动变化，鼓励！>加油！！>太棒了！！！让我们看看它是如何完成的。1.点击和抬起鼠标进行交互使用伪元素让HTML足够简洁和灵活。例如HTML如下：12345...这种方法需要创建多个标签，有点繁琐，不易扩展，在伪元素中没办法使用。但是现在有一种更简洁的实现方式，那就是CSS@property[1]。这个是来做什么的？简单来说，就是可以自定义属性。在此示例中，数字可以像颜色一样进行转换和动画处理。可能大家看不懂，还是看例子吧。我们首先通过CSS变量将数字渲染到页面中，这里就需要计数器的帮助了。有兴趣的可以参考这篇文章：Tips:HowtodisplayCSSvarvariablevaluewiththehelpofthecontentattribute[2]。.like::after{/**/--t:0;计数器复位：时间变量（--t）；content:counter(time);}为了测试方便，先设置提示可见，效果如下：如何让这个数字变化？可以使用CSS动画，将--t改为999。@keyframescount{to{--t:999}}.like::after{/**/--t:0;计数器复位：时间变量（--t）；内容：计数器（时间）；animation:count100ssteps(999)forwards;}效果如下：不过没有动画，其实等100s后直接变成999。然后是最重要的一步，添加以下自定义属性。@property--t{语法：'<整数>'；继承：假的；initial-value:0;}对，就是加上这一小段CSS，动画就出来了。是不是很神奇？可以理解为通过@property定义后，这个变量--t本身就可以单独动画了，就像颜色变化一样。那么，我们需要实现的是，只有按下时才会出现动画，并且动画可以默认暂停，只有按下时才会运行。.like::after{/**/--t:0;计数器复位：时间变量（--t）；内容：计数器（时间）；动画：向前数100步（999）；动画播放状态：暂停；/*默认暂停*/}.like:active::after{/**/animation-play-state:running;/*Presstorun*/}下面看看效果：3.提示的阶段性变化Tips在数字不断积累的过程中有阶段性变化，如下：0~20：鼓励！20~50：加油！！50~：太棒了！！！那么，如何根据CSS变量自动映射不同的提示呢？这里可以使用自定义计数器[3]，比如我们先自定义一个计数器。@counter-styleencourage{系统：循环；符号：'鼓励！';range:120;}这样就定义了一个名为“encouragement”的计数器。简单说明一下，system就是计算系统，这里是循环的，就是循环使用开发者提供的一组字符，字符用符号来定义。然后symbols代表计算符号，也就是具体显示的字符，这里指定为鼓励！正好。然后是range属性，表示计数器的范围，这里指定为120。示意图如下：海关柜台这部分内容比较复杂，也比较新。有兴趣的可以参考张新旭的这篇文章：CSS@counter-style规则详解[4]。那么这个自定义计数器也是通过一个伪元素来渲染的。.like::after{content:counter(time)counter(time,encouragement);}看下图效果：可以看到当计数在1~20范围内时，自定义字符“encouragement!“被渲染出来，当超过这个范围的时候，又变成了一个普通的数字，所以我们需要做一个“fallback”的过程，也就是这个范围之外的规则。CSS计数器也提供了这样的能力，叫做fallback，实现是这样的。@counter-styleencourage{系统：循环；符号：'鼓励！';范围：120；回退：来吧}@counter-style来吧{系统：循环；符号：'来吧！！';范围：2150；后备：真棒}@counter-styleawesome{系统：循环；符号：'太棒了！！！';range:51infinite;}相信应该更容易理解。当计数器范围超出时，会按照fallback的计数规则继续执行，可以无限嵌套。上面可以稍微简化一下，interval可以更灵活一些，比如加油Interval，进入这个计数器的时候，起点肯定已经超过了20，所以起点也可以改成0，简化如下：@反式鼓励{系统：循环；符号：'鼓励！';范围：020；回退：来吧}@counter-style来吧{系统：循环；符号：'来吧！！';范围：050；/*进入这个计数器，起点必须超过20*/fallback:Great}@counter-styleGreat{system:cyclic;符号：'太棒了！！！';}如下图：这样就得到了文章开头的演示效果：完整代码可以访问：CSSaddnumanimation(codenpen.io)[5]或者CSSaddnumanimation(juejin.cn)[6]或者CSS添加数字动画(gitee.io)[7]。4.总结以上就是全部内容，不赖的动画技巧，你学会了吗？让我们在下面总结一下。鼠标按下和向上的过渡动画通常是相反的，但是您可以通过设置鼠标按下时的过渡来更改向上动画。可以使用@property来计算数字，它可以转换或动画化CSS变量，例如颜色。计数器允许在伪元素上呈现CSS变量。animation-play-state可以实现按下动画开始，抬起动画暂停的效果。自定义计数器允许在指定的计数范围内呈现某些字符。实现计数的相变，可以使用fallback回滚跳转到另一个计数器。兼容性一提，Chrome91+，目前不太适合外用，但可以提前知道。当然，自定义计数器的潜力远不止于此，后面还会进行更多的挖掘和应用。参考资料[1]CSS@property：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property。[2]小技巧：如何借助content属性显示CSSvar变量值：https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/。[3]自定义计数器：https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style。[4]CSS@counter-style规则详细介绍：https://www.zhangxinxu.com/wordpress/2021/10/css-counter-style/。[5]CSS添加数字动画（codenpen.io）：https://codepen.io/xboxyan/pen/gOeEMwP。[6]CSS添加num动画（juejin.cn）：https://code.juejin.cn/pen/7133856833428520963。[7]CSS添加num动画（gitee.io）：https://xboxyan.gitee.io/demo/CSS_add_num_animation.html。
