Wir sehen oft einige Animationseffekte auf der Seite. Viele dieser Animationseffekte können nur durch CSS erreicht werden.
Hier verwenden wir das CSS3-Animations--Attribut . Das
animation-Attribut ist ein Kurzattribut zum Festlegen von sechs Animationsattributen:
animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.
animation-duration gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function gibt die Geschwindigkeitskurve der Animation an.
animation-delay gibt die Verzögerung vor dem Start der Animation an.
animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Hinweis: Bitte geben Sie immer das Attribut „animation-duration“ an, andernfalls ist die Dauer 0 und die Animation wird nicht abgespielt.
animation: name duration timing-function delay iteration-count direction;
Zum Beispiel: ein kleiner Ball, der sich kreisförmig bewegt. Nachfolgend finden Sie den relevanten Code. Sie können darauf basierend entsprechende Änderungen vornehmen.
<!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>Das obige ist der detaillierte Inhalt vonEin Beispiel für die Verwendung von CSS zur Implementierung eines Kreisbewegungsballs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
