CSSを使用してdivの一定の回転を実現する方法-CSSチュートリアル-php.cn

CSSを使用してdivの一定の回転を実現する方法

藏色散人

リリース： 2023-01-04 09:38:50

オリジナル

8365 人が閲覧しました

div の一定の回転を実現する Css メソッド: まず div 要素を作成し、それに ID 値を与えます。次に、インラインスタイルを使用して div にいくつかのスタイルを追加し、次に「@keyframes」ルールを使用してアニメーション回転; 最後にdivのアニメーションを指定します。

CSSを使用してdivの一定の回転を実現する方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

関連する推奨事項: 「css ビデオチュートリアル」

div 回転を常に実現するための css

1. 最初に作成しますdiv 要素に id 値 xuanzhuan を指定し、インラインスタイルを使用して div にいくつかのスタイルを追加します。

<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

ログイン後にコピー

CSSを使用してdivの一定の回転を実現する方法

2. 次に、@keyframes ルールを使用してアニメーションの回転を作成します

@-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. 最後に、div のアニメーションを指定します。

#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;
}

ログイン後にコピー

効果:

CSSを使用してdivの一定の回転を実現する方法