Heim > Artikel > Web-Frontend > So sorgen Sie dafür, dass sich ein Bild in CSS3 weiter dreht
So sorgen Sie dafür, dass sich ein Bild in CSS3 weiter dreht
- WBOYOriginal
- 2022-03-28 18:34:053805Durchsuche
Methode: 1. Verwenden Sie die Anweisung „img{animation: name time infinite}“, um die Animation an das Bild zu binden. 2. Verwenden Sie die Anweisung „@keyframes name {100%{transform:rotate(rotation angle)}}“. Legen Sie die Drehung der Animationsaktion fest, um den Effekt zu erzielen, dass sich das Bild ständig dreht.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So lassen Sie ein Bild in CSS3 weiter rotieren
In CSS können Sie das Animationsattribut verwenden, um die Animationsdauer und -zeiten zu steuern. Die Syntax lautet:
animation: name duration timing-function delay iteration-count direction;
Der Attributwert iteration-count legt fest, wie oft die Animation abgespielt werden soll. Bei der Einstellung „unendlich“ wird die Animation ewig abgespielt.
Verwenden Sie dann die @keyframes-Regel und transform:rotate, um die Rotationsaktion der Animation festzulegen.
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>
img{
width:100px;
height:100px;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<img src="1118.01.png" alt="">
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo sorgen Sie dafür, dass sich ein Bild in CSS3 weiter dreht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!