Comment obtenir l'effet d'animation de la rotation de l'image en HTML5

Cette fois, je vais vous montrer comment obtenir l'effet d'animation d'images tournant en html5 Quelles sont les précautions pour réaliser l'effet d'animation d'images tournant en html5 Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Jetez d'abord un œil à l'effet :

2. > utilisé L'image est la suivante : (C'est l'image rotative blanche)

<img  alt="Comment obtenir l'effet d'animation de la rotation de l'image en HTML5" >
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article. Pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajouter une icône d'invite à droite de la liste déroulante de sélection

Comment utiliser Canvas pour implémenter la fonction d'avatar personnalisé

Explication détaillée du glisser-déposer dans H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!