css暂停旋转 |npm 打包 css文件

.rotate {
animation-name: spin;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate:hover {
animation-play-state: paused;
}

大家可以通过CSS的animation-play-state属性来实现暂停旋转效果。首先，大家给需要旋转的元素添加一个类名.rotate，然后为其设置旋转动画，这里的动画名为spin，持续时间为2秒，按照线性运动方式进行，无限循环。接下来，在hover状态下，将动画播放状态设置为paused，即可暂停旋转。

需要注意的是，这种方法只适用于使用animation动画实现旋转的情况，如果是使用transform:rotate属性实现旋转，则需要使用JavaScript来控制动画播放状态。