我最近一直在玩 CSS 计数器,我想知道是否可以将它们放在 CSS 动画循环中并递增它们。我的代码相当简单:
div {
animation-name: anim;
animation-duration: 0.5s;
animation-iteration-count: 10;
animation-fill-mode: forwards;
}
div:before {
counter-increment: variable;
content: counter(variable);
}
@keyframes anim {
100% { counter-increment: variable; }
}
<div></div>
您可以看到数字上升,但随后又恢复为 1。我假设
animation-fill-mode: forwards
会阻止这种情况发生,但我想不会。我做错了什么,还是 CSS 计数器不可能做到这一点?
最佳答案
使用简单的脚本代码可以轻松实现,试试这个
<div><span class="count">200</span></div>
<div><span class="count">177</span></div>
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
Refer This
关于递增计数器的 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47140208/