css实现数字转动效果 |h5 css3渐变高亮划过

/* 定义数字转动动画 */
@keyframes rotate {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
/* 定义数字样式 */
.number {
display: inline-block;
padding: 0.1em 0.3em;
border-radius: 0.2em;
background-color: #333;
color: #fff;
font-size: 1.5em;
text-align: center;
vertical-align: middle;
animation: rotate 2s ease-in-out infinite;
}
/* 在HTML中引用样式 */
<p>
数字转动效果：<span class="number">123</span>
</p>

上面的代码定义了一个rotate动画，它用于将数字进行循环旋转。然后大家定义了一个样式类.number，它用于定义数字的样式，并将动画与该样式关联。

最后，大家在HTML中应用number样式，将相关数字包含在span标签中，就可以看到数字不停地转动了。