Comment obtenir une rotation constante de div en utilisant CSS

Comment obtenir une rotation constante de div avec CSS : créez d'abord un élément div et attribuez-lui une valeur d'identification ; puis utilisez des styles en ligne pour ajouter des styles au div, puis utilisez la règle "@keyframes" pour créer ; une rotation animée Enfin, spécifiez l'animation pour le div.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Recommandations associées : "Tutoriel vidéo CSS"

Css pour réaliser un div toujours en rotation

1. Créez d'abord un div. element et donnez-lui une valeur d'identification xuanzhuan, utilisez des styles en ligne pour ajouter des styles au div.

<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

2. Utilisez ensuite la règle @keyframes pour créer une animation rotation

@-webkit-keyframes rotate{
    from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
    from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
    from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

3. Enfin, spécifiez l'animation pour le div.

#xuanzhun{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

Effet :

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!