Comment obtenir un effet de rotation circulaire en CSS3-Questions et réponses frontales-php.cn

Comment obtenir un effet de rotation circulaire en CSS3

WBOY

Libérer： 2022-03-22 12:17:19

original

3051 Les gens l'ont consulté

Méthode : 1. Utilisez "border-radius:100%" pour définir l'élément comme circulaire ; 2. Utilisez "@keyframes name {100%{transform:rotate(360deg);}}" pour définir l'animation 3 ; . Utilisez "animation :Name time" pour lier les effets d'animation aux éléments.

Comment obtenir un effet de rotation circulaire en CSS3

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

Comment obtenir un effet de rotation circulaire en CSS3

border-radius vous permet de définir les coins arrondis de la bordure extérieure d'un élément. Détermine un cercle lors de l'utilisation d'un rayon et une ellipse lors de l'utilisation de deux rayons. L'intersection de ce cercle (ovale) et de la bordure crée un effet de coin arrondi.

En utilisant les règles @keyframes, vous pouvez créer des animations.

Créez des animations en passant progressivement d'un paramètre de style CSS à un autre.

Vous pouvez modifier les paramètres de style CSS plusieurs fois pendant le processus d'animation.

Spécifiez quand le changement se produit en utilisant %, ou les mots-clés « de » et « à », qui sont identiques à 0 % à 100 %.

0 % correspond au début de l'animation, 100 % correspond à la fin de l'animation.

Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs pour 0 % et 100 %.

La syntaxe est :

@keyframes animationname {keyframes-selector {css-styles;}}

Copier après la connexion

La syntaxe de l'attribut d'animation est :

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Copier après la connexion

animation-name Spécifie le nom de l'image clé à lier au sélecteur
animation-duration Spécifie combien de secondes ou de millisecondes l'animation prend pour terminer
animation-timing-function Définit la façon dont l'animation terminera un cycle
animation-delay Définit l'intervalle de retard avant le début de l'animation.
animation-iteration-count Définit le nombre de fois que l'animation est jouée.
animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.
animation-fill-mode spécifie le style à appliquer à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation est terminée, ou lorsque l'animation a un délai avant de commencer à jouer).
animation-play-state Spécifie si l'animation est en cours d'exécution ou en pause.

L'exemple est le suivant :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
   100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
  这是一个圆
</div>
<br><br>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment obtenir un effet de rotation circulaire en CSS3