CSS怎么利用计数器来实现长按点赞累积动画(css,web开发)

那么，如何根据 CSS 变量来自动映射不同的提示呢？这里可以用到自定义计数器，比如，我们先自定义一个计数器

@counter-style鼓励{
system:cyclic;
symbols:'鼓励！';
range:120;
}

这样定义了一个名为“鼓励”的计数器，简单解释一下，system，表示计算系统，这里为cyclic，表示循环使用开发者提供的一套字符，字符由symbos定义。然后symbos表示计算符号，也就是具体展示的字符，这里指定为鼓励!就行了。然后有个range属性，表示计数器的范围，这里指定为1 20。示意如下

这部分自定义计数器内容比较复杂，也比较新，有兴趣的可以参考张鑫旭的这篇文章：CSS @counter-style规则详细介绍

然后将这个自定义的计数器也通过伪元素渲染出来

.like::after{
content:counter(time)counter(time,鼓励);
}

下面看下效果

可以看到，当计数在1~20范围内，渲染的是自定义字符“鼓励!”，当超过这个范围后，又变成了普通的数字，因此我们需要做一个“回退”处理，也就是在这个区间外的规则，CSS 计数器也提供了这样的能力，名为fallback，实现就是这样

@counter-style鼓励{
system:cyclic;
symbols:'鼓励！';
range:120;
fallback:加油
}
@counter-style加油{
system:cyclic;
symbols:'加油！！';
range:2150;
fallback:太棒了
}
@counter-style太棒了{
system:cyclic;
symbols:'太棒了！！！';
range:51infinite;
}

相信应该比较好理解，当计数器range超出时，就会按照fallback的计数规则继续执行，可以无限嵌套，上面可以稍微简化一下，区间可以更加灵活一点，比如加油的区间，进入到这个计数器，起点肯定已经超过了20，所以可以把起点也改为0，简化后如下

@counter-style鼓励{
system:cyclic;
symbols:'鼓励！';
range:020;
fallback:加油
}
@counter-style加油{
system:cyclic;
symbols:'加油！！';
range:050;/进入到这个计数器，起点肯定已经超过了20/
fallback:太棒了
}
@counter-style太棒了{
system:cyclic;
symbols:'太棒了！！！';
}

示意如下

效果

以上就是关于“CSS怎么利用计数器来实现长按点赞累积动画”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。