Maison > Article > interface Web > Comment obtenir un effet d'animation rotatif en CSS

Comment obtenir un effet d'animation rotatif en CSS

WBOYoriginal: 2021-12-09 15:08:4522632parcourir

Méthode : 1. Utilisez l'instruction "element {animation: name time infinite}" pour lier l'animation à l'élément ; 2. Utilisez l'instruction "@keyframes name {100%{transform:rotate(rotation angle)}}" pour définir la rotation de l'action d'animation pour obtenir l'effet de rotation constante des éléments.

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

Comment obtenir un effet d'animation rotatif en CSS

En CSS, vous pouvez utiliser l'attribut animation pour lier l'animation à un élément. L'attribut animation peut contrôler la durée et le nombre d'animations.

animation: name duration timing-function delay iteration-count direction;

where:

Comment obtenir un effet danimation rotatif en CSS

Lorsque la valeur de l'attribut est définie sur "infini", il stipule que l'animation sera jouée à l'infini. Lorsque l'on lie une animation de rotation à l'élément, celui-ci peut continuer à tourner.

Ensuite, définissez l'action de rotation de l'animation via les règles @keyframes.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Résultat de sortie :

Comment obtenir un effet danimation rotatif en CSS

(Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS)

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!

html5 css css3 transform animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer le style de la zone de saisie en CSSArticle suivant：Comment supprimer le style de la zone de saisie en CSS

Articles Liés

Voir plus