Heim > Artikel > Web-Frontend > So steuern Sie die Rotationszeit in CSS3

So steuern Sie die Rotationszeit in CSS3

WBOYOriginal: 2021-12-14 12:43:423448Durchsuche

Methode: 1. Verwenden Sie das Animationsattribut und die Regel „@keyframes“, um eine Rotationsanimation für das Element zu definieren. 2. Verwenden Sie das Attribut „animation-duration“, um die Rotationszeit des Steuerelements festzulegen {animation-duration:time;} ".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So steuern Sie die Rotationszeit in CSS3

In CSS können Sie das Animationsattribut verwenden, um Animationseffekte an Elemente zu binden, und die Regel „@keyframes“ verwenden, um Animationsaktionen für Elemente anzugeben.

Verwenden Sie das Attribut „animation-duration“, um die Zeit zu definieren, die die Animation benötigt, um einen Zyklus abzuschließen, in Sekunden oder Millisekunden.

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>
        .div1{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum;
            animation-duration:10s;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
.div2{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum1;
            animation-duration:5s;
        }
        @keyframes fadenum1{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div class="div1"></div><br><br>
    <div class="div2"></div>
</body>
</html>

Ausgabeergebnis:

So steuern Sie die Rotationszeit in CSS3

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo steuern Sie die Rotationszeit in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 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：Was ist der CSS-Code, um Kleinbuchstaben in Großbuchstaben zu ändern?Nächster Artikel：Was ist der CSS-Code, um Kleinbuchstaben in Großbuchstaben zu ändern?

In Verbindung stehende Artikel

Mehr sehen