Maison >interface Web >tutoriel CSS >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:364237parcourir
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='text/css'>
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!