CSS 动画实现数字从 0 到 100 缓慢增加效果 - 代码示例

"在 CSS 中，可以使用动画来实现数字从 0 到 100 慢慢增加的效果。可以使用 @keyframes 规则来定义动画，并使用 animation 属性来应用动画。\n\n下面是一个实现数字从 0 到 100 慢慢增加的 CSS 代码示例：\n\ncss\n/* 定义 @keyframes 规则 */\n@keyframes counting {\n from {\n counter-increment: count 0; /* 初始值为 0 */\n }\n to {\n counter-increment: count 100; /* 最终值为 100 */\n }\n}\n\n/* 应用动画 */\n.number {\n counter-reset: count; /* 设置计数器初始值为 0 */\n font-size: 24px; /* 设置数字的字体大小 */\n animation: counting 5s ease-in-out; /* 动画名称、持续时间、缓动函数 */\n}\n\n/* 显示数字 */\n.number::after {\n content: counter(count); /* 显示计数器的值 */\n}\n\n\n在上述代码中，通过 @keyframes 规则定义了一个名为 counting 的动画，初始值为 0，最终值为 100。然后，在 .number 选择器中应用了这个动画，持续时间为 5 秒，使用了 ease-in-out 缓动函数。\n\n最后，在 .number::after 伪元素中使用 content 属性和 counter 函数来显示计数器的值。\n\n你可以将上述代码应用到你的 HTML 文档中的相应元素上，就可以实现数字从 0 到 100 慢慢增加的效果。\n