CSS中有一个非常有趣的属性,可以使用它让数字变化。这个属性就是animation,用于定义一组动画序列。
@keyframes changeNumber{0% {color: black; font-size: 16px; transform: scale(1); }50% {color: red; font-size: 20px; transform: scale(1.5); }100% {color: blue; font-size: 24px; transform: scale(2); }}.number{animation: changeNumber 2s infinite; }
上述代码定义了一个名为changeNumber的动画序列,包含三个关键帧,分别是0%、50%和100%。在0%时,文字颜色为黑色,字体大小为16px,缩放比例为1;在50%时,文字颜色为红色,字体大小为20px,缩放比例为1.5;在100%时,文字颜色为蓝色,字体大小为24px,缩放比例为2。
然后,我们将这个动画序列应用到元素上,这里以class为number的元素为例,设置动画时间为2秒,无限重复。
这样,我们就可以看到数字不断变化的效果了!通过改变不同关键帧的样式属性,我们可以实现各种各样的数字变化效果。