Heim >Web-Frontend >Front-End-Fragen und Antworten >Was definiert Rotationsanimation in CSS3-Animationen?

Was definiert Rotationsanimation in CSS3-Animationen?

WBOY
WBOYOriginal
2022-03-22 15:46:021931Durchsuche

In CSS3 können Sie @keyframes-Regeln, Animations- und Transformationsattribute verwenden, um Rotationsanimationen zu definieren; das Animationsattribut wird verwendet, um Elementanimationseffekte zu binden, @keyframes-Regeln werden verwendet, um Elementanimationsaktionen festzulegen, und das Transformationsattribut wird verwendet, um Legen Sie den Rotationsstil der Elemente fest.

Was definiert Rotationsanimation in CSS3-Animationen?

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

Was wird verwendet, um Rotationsanimationen in CSS3-Animationen zu definieren?

Mit @keyframes-Regeln können Sie Animationen erstellen.

Das Prinzip beim Erstellen von Animationen besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Die

animation-Eigenschaft ist eine Abkürzungseigenschaft zum Festlegen von sechs Animationseigenschaften:

animation: name duration timing-function delay iteration-count direction;

Was definiert Rotationsanimation in CSS3-Animationen?

Die Transformationseigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.

otate(angle) definiert die 2D-Rotation und gibt den Winkel in den Parametern an.

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:

Was definiert Rotationsanimation in CSS3-Animationen?

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas definiert Rotationsanimation in CSS3-Animationen?. 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