CSS - Animación de rotación de bucle infinito de 360 ° de caja de música (elementos en círculos)

prefacio

Debido a que la Gifimagen es demasiado pequeña, parece muy poco uniforme, pero es muy suave en una situación real, no se preocupe.

Implemente una animación que gire en un bucle 360°infinito , como se muestra en la siguiente figura:

Código de muestra

Nota: A través de las propiedades animationcompuestas , puede controlar la velocidad de rotación de la animación y otros parámetros.

El siguiente código se puede copiar directamente y ejecutar para ver el efecto.

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

Recursos de imagen

Los siguientes son los recursos de imagen del ejemplo, que se pueden guardar localmente ~