ホームページ  >  記事  >  ウェブフロントエンド  >  マウスオーバーで回転した要素のCSS3コードは何ですか

マウスオーバーで回転した要素のCSS3コードは何ですか

WBOY
WBOYオリジナル
2022-03-22 12:17:291925ブラウズ

コードは「Element:hover{animation:name time}@keyframes name{100%{transform:rotate(回転角度);}}」です。ホバー セレクターはマウスの通過スタイルを設定します。アニメーションと @keyframes 要素をアニメーション化します。

マウスオーバーで回転した要素のCSS3コードは何ですか

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

マウスがその上を通過するときに回転する要素の CSS3 コードは何ですか?

:ホバーは、マウスがリンク上を移動するときに追加される特別なスタイルです。

:hover selector は、リンクだけでなくすべての要素で使用できます。

アニメーション属性を使用して、アニメーションを要素にバインドできます。アニメーション属性は、アニメーションの継続時間と数を制御できます。構文は次のとおりです:

animation: name duration timing-function delay iteration-count direction;

マウスオーバーで回転した要素のCSS3コードは何ですか

# #属性の値設定 「infinite」の場合、アニメーションを無限に再生することを規定しており、要素に回転アニメーションをバインドすると回転し続けることができます。

次に、@keyframes ルールを通じてアニメーションの回転アクションを設定します。

例は次のとおりです:


<html>
<head>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
        }
div:hover{animation:fadenum 5s;}
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

出力結果:

マウスオーバーで回転した要素のCSS3コードは何ですか##(学習ビデオ共有:

css ビデオ チュートリアル

以上がマウスオーバーで回転した要素のCSS3コードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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