Css-Methode zum Realisieren einer konstanten Drehung von div: Erstellen Sie zuerst ein div-Element und geben Sie ihm einen ID-Wert. Verwenden Sie dann Inline-Stile, um dem div einige Stile hinzuzufügen Geben Sie schließlich die div-Just-Animation an.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Verwandte Empfehlungen: „css-Video-Tutorial“
css, um eine konstante Rotation von div zu realisieren
1 Erstellen Sie zunächst ein div-Element, geben Sie ihm den ID-Wert xuanzhuan und verwenden Sie Inline-Stile, um dem einige Stile hinzuzufügen div.
<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">
2. Verwenden Sie dann die @keyframes-Regel, um eine Animationsdrehung zu erstellen
@-webkit-keyframes rotate{
from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}3. Geben Sie abschließend die Animation für das Div an.
#xuanzhun{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}Effekt:
Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit CSS eine konstante Rotation von div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
