css 数字增加 动画 |css实现导航高亮

.number-increment {
font-size: 24px; /* 字体大小 */
font-weight: bold; /* 字体粗细 */
color: #2ecc71; /* 字体颜色 */
animation: counter 2s ease-out; /* 动画效果 */
}
@keyframes counter {
from {
transform: translateX(-50%) scale(1);
opacity: 0;
}
to {
transform: translateX(-50%) scale(2);
opacity: 1;
}
}

其中，.number-increment是一个类名，可以添加到需要实现数字增加动画的DOM元素中。animation属性指定了动画效果，counter是动画名称，2s是动画持续时间，ease-out表示动画是从快到慢结束的。

在使用时，大家可以把需要增加的数字放在一个span标签中，然后添加number-increment类名即可：

<span class="number-increment">1000</span>

运行代码后，数字会在2秒内从0增加到1000，并且伴随着缩放效果和渐变出现的动画。大家可以根据实际需求修改CSS代码中的数字、颜色、字体等属性，实现更加个性化的数字增加动画。