Methode: 1. Verwenden Sie die Anweisung „element {animation:name time infinite}“, um die Animation an das Element zu binden. 2. Verwenden Sie die Anweisung „@keyframes name {100%{transform:rotate(rotation angle)}}“. Legen Sie die Drehung der Animationsaktion fest, um den Effekt einer konstanten Drehung der Elemente zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie einen rotierenden Animationseffekt in CSS
In CSS können Sie die Animation mit dem Animationsattribut an ein Element binden. Die Syntax lautet:
animation: name duration timing-function delay iteration-count direction;
wobei:
Wenn der Wert des Attributs auf „unendlich“ gesetzt ist, legt es fest, dass die Animation unendlich abgespielt wird. Wenn wir eine Rotationsanimation an das Element binden, kann es sich weiter drehen.
Dann legen Sie die Rotationsaktion der Animation über @keyframes-Regeln fest.
Das Beispiel sieht wie folgt aus:
<!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>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen rotierenden Animationseffekt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
