CSS - Music Box 360° Infinite Loop Rotation Animation (Elements in Circles)

foreword

Because the Gifpicture is too small, it seems very unsmooth, but it is very smooth in real situation, don't worry.

Implement an animation that rotates in an 360°infinite loop, as shown in the following figure:

sample code

Note: Through the animationcompound properties, you can control the animation rotation speed and other parameters.

The following code can be copied directly and run to see the effect.

<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);}
}

Image resources

The following are the image resources of the example, which can be saved locally~