Maison > Article > interface Web > Comment contrôler le temps de rotation en CSS3

Comment contrôler le temps de rotation en CSS3

WBOYoriginal: 2021-12-14 12:43:423454parcourir

Méthode : 1. Utilisez l'attribut d'animation et la règle "@keyframes" pour définir une animation de rotation pour l'élément ; 2. Utilisez l'attribut "animation-duration" pour définir le temps de rotation de l'élément de contrôle. {animation-duration:time;} ".

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

Comment contrôler le temps de rotation en CSS3

En CSS, vous pouvez utiliser l'attribut d'animation pour lier des effets d'animation aux éléments et utiliser la règle "@keyframes" pour spécifier des actions d'animation pour les éléments.

Utilisez l'attribut animation-duration pour définir le temps nécessaire à l'animation pour terminer un cycle, en secondes ou millisecondes.

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>
        .div1{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum;
            animation-duration:10s;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
.div2{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum1;
            animation-duration:5s;
        }
        @keyframes fadenum1{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div class="div1"></div><br><br>
    <div class="div2"></div>
</body>
</html>

Résultat de sortie :

Comment contrôler le temps de rotation en CSS3

(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 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：Quel est le code CSS pour changer les minuscules en majuscules ?Article suivant：Quel est le code CSS pour changer les minuscules en majuscules ?

Articles Liés

Voir plus