css字旋转动画 |css字体图标是怎么做的

.rotate-text {
display: inline-block;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

首先，大家创建一个样式类“rotate-text”，该类设置了display属性值为“inline-block”，使文本水平居中，并设置了animation属性，将该类绑定到一个名为“spin”的关键帧上。

接着，大家定义了名为“spin”的关键帧，设定了动画的起始状态和结束状态。其中，0%表示动画开始时的状态，transform属性值为“rotate(0deg)”表示元素旋转角度为0度，即不旋转。100%表示动画结束时的状态，transform属性值为“rotate(360deg)”表示元素旋转角度为360度，即逆时针旋转一圈。通过animation属性将元素的旋转状态在2秒钟内线性地反复播放（infinite）。

最后，大家只需在HTML代码中使用该样式类，即可实现文字旋转效果。

<p><span class="rotate-text">CSS字旋转动画</span>是一种常用的网页设计效果</p>

以上就是CSS字旋转动画的实现过程，通过简单的代码调整，大家可以实现不同样式的旋转效果。可以尝试一下不同的旋转速度、旋转方向、旋转弧度等，让你的网页效果更加出色。