suchen

Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie einen rotierenden Animationseffekt in CSS

So erzielen Sie einen rotierenden Animationseffekt in CSS

WBOY
WBOYOriginal
2021-12-09 15:08:4522700Durchsuche

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.

So erzielen Sie einen rotierenden Animationseffekt in CSS

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:

So erzielen Sie einen rotierenden Animationseffekt in CSS

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:

So erzielen Sie einen rotierenden Animationseffekt in CSS

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

html5 css css3 transform animation
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
Vorheriger Artikel：So entfernen Sie den Eingabefeldstil in CSSNächster Artikel：So entfernen Sie den Eingabefeldstil in CSS

In Verbindung stehende Artikel

Mehr sehen