So erreichen Sie mit CSS eine konstante Rotation von div

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!