改变悬停到页面加载CSS3

Question

我从https://codepen.io/chriscoyier/pen/NWNJpdJ获得了以下代码，我怎么能改变这从悬停属性到页面加载，并有计数器停止在100而不回到0。

@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
div {
transition: --num 5s;
counter-set: num var(--num);
font: 800 40px system-ui;
}
div::after {
content: counter(num);
}
div:hover {
--num: 100;
}
body {
margin: 2rem;
}

Hover the number.
<div></div>

Answer 1

Try this..
div::after {
font: 800 40px system-ui;
content: counter(num);
animation: counter 5s linear infinite alternate;
counter-reset: count 0;
}
@keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 1;
}
20% {
counter-increment: count 2;
}
30% {
counter-increment: count 3;
}
40% {
counter-increment: count 4;
}
50% {
counter-increment: count 5;
}
60% {
counter-increment: count 6;
}
70% {
counter-increment: count 7;
}
80% {
counter-increment: count 8;
}
90% {
counter-increment: count 9;
}
100% {
counter-increment: count 10;
}
}

Answer 2

你可以试试-

HTML

Counter
<div id="demo">0</div>

CSS

#demo{  
font: 800 40px system-ui;
}  
body {
margin: 2rem;
}

JavaScript

let x=0;
let c=setInterval(function() {
document.getElementById("demo").innerHTML = x;        
x++;  
if(x==101)
clearInterval(c);
},50);