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

WBOY
WBOYOriginal
2022-03-28 18:34:053799Durchsuche

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.

So sorgen Sie dafür, dass sich ein Bild in CSS3 weiter 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:

So sorgen Sie dafür, dass sich ein Bild in CSS3 weiter dreht

(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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn