Heim >Web-Frontend >CSS-Tutorial >So erreichen Sie mit CSS eine konstante Rotation von div

So erreichen Sie mit CSS eine konstante Rotation von div

藏色散人
藏色散人Original
2021-01-06 10:53:258416Durchsuche

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.

So erreichen Sie mit CSS eine konstante Rotation von div

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;">

So erreichen Sie mit CSS eine konstante Rotation von div

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:

So erreichen Sie mit CSS eine konstante Rotation von div

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!

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