[分享]css3数据从1到100

CSS3提供了丰富的数字动画效果，接下来我们来看一下如何用CSS3将数字从1到100进行动画演示。

/* 定义数字变化的keyframes */
@keyframes changeNum {
  from { content: "1"; }
  to { content: "100"; }
}

/* 设置样式 */
.number {
  font-size: 60px;
  font-weight: bold;
  animation: changeNum 5s ease-in-out;
} 

以上代码中，我们使用了CSS3中的@keyframes关键字来定义数字变化的动画，并使用了animation属性来将该动画绑定到.number类上。

注意，在这里我们使用了content属性来实现数字的变化，如果希望在其他地方使用该数字，需要使用javascript将其捕获。

/* js代码 */
const num = document.querySelector(".number");
const lastNum = parseInt(getComputedStyle(num).content);
console.log(lastNum); // 输出100 

最后，我们来看一下实现效果：

通过CSS3的动画效果，数字从1到100变化了起来。