CSS - 音乐盒 360° 无限循环旋转动画（元素转圈）

前言

由于 Gif 图片过小的问题，显得很不流畅，真实情况下很流畅，放心。

实现一个 360° 无限循环旋转的动画，如下图所示：

示例代码

注意：通过 animation 复合属性，可控制动画旋转速度及其他参数。

以下代码可直接复制，运行即可查看效果。

<image
class="come"
src="https://img-blog.csdnimg.cn/2c897a5f56dd4f169700660594e45902.png"
/>

/* 执行动画 */
.come{
    
    
  width: 100px;
  height: 100px;
  animation: rotate 5s linear infinite;
}

/* 360°旋转动画 */
@keyframes rotate{
    
    
  /* 需要兼容的自行补入噢 */
  0%{
    
    transform:rotate(0deg);}
  100%{
    
    transform:rotate(360deg);}
}

图片资源

以下即为示例的图片资源，可另存为本地~