ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してdivの一定の回転を実現する方法

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

藏色散人
藏色散人オリジナル
2021-01-06 10:53:258373ブラウズ

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の一定の回転を実現する方法

以上がCSSを使用してdivの一定の回転を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。