recherche

Maison  >  Article  >  interface Web  >  Un exemple d'utilisation de CSS pour implémenter une boule à mouvement circulaire

Un exemple d'utilisation de CSS pour implémenter une boule à mouvement circulaire

黄舟
黄舟original
2017-10-27 10:08:364190parcourir

Nous voyons souvent des effets d'animation sur la page. Beaucoup de ces effets d'animation ne peuvent être obtenus que via CSS.

Ici, nous utilisons l'attribut CSS3 animation . L'attribut

animation est un attribut raccourci permettant de définir six attributs d'animation :
animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur.
animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.
animation-timing-function spécifie la courbe de vitesse de l'animation.
animation-delay spécifie le délai avant le début de l'animation.
animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée.
animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.
Remarque : Veuillez toujours spécifier l'attribut animation-duration, sinon la durée sera de 0 et l'animation ne sera pas jouée. 

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

Par exemple : une petite balle se déplaçant dans un mouvement circulaire. Vous trouverez ci-dessous le code correspondant, vous pouvez apporter les modifications correspondantes sur cette base. 

<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=&#39;text/css&#39;>
body{background:black;}
.class_ball
{
    width:8px;
    height:8px;
    background:#FFFFFF;
    border-radius:4px;
    box-shadow:0 0 7px #FFFFFF;
    left:200px;
    top:200px;
    position:absolute;
    -webkit-animation:action 2s linear infinite;
}
@-webkit-keyframes action
{
from{transform: rotate(0deg)  translate(58px) rotate(0deg);}
to{transform: rotate(360deg) translate(58px) rotate(-360deg);}
}
</style>
</head>
<body>
   <p class="class_ball"></p>
</body>
</html>

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!

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：Résumé de l'utilisation des sélecteurs en CSSArticle suivant：Résumé de l'utilisation des sélecteurs en CSS

Articles Liés

Voir plus