CSS3でマウスホバー時に360度回転効果を作成する方法-フロントエンドQ&A-php.cn

CSS3でマウスホバー時に360度回転効果を作成する方法

WBOY

リリース： 2022-03-30 11:48:31

オリジナル

3044 人が閲覧しました

方法: 1.「element:hover{animation:name time;}」を使用して、マウスがホバーしているときにアニメーションスタイルをバインドします。2.「keyframes name {100%{transform:rotate(360deg)」を使用します。 ;}}" 360 度回転アクションを指定するだけです。

CSS3でマウスホバー時に360度回転効果を作成する方法

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

CSS3 でマウスホバー時に 360 度の回転効果を作成する方法

ステップ 1: :hover セレクターを使用して、マウスホバー時の要素のスタイルを設定します。

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

ヒント: :hover セレクターは、リンクだけでなくすべての要素で使用できます。

アニメーション属性は、アニメーションスタイルを要素にバインドできます。

ステップ 2: キーフレームルールとtransform:rotateを使用して、要素の 360 度の回転を設定します。

@keyframes ルールを使用して、アニメーションを作成できます。

ある CSS スタイル設定から別の CSS スタイル設定に徐々に変更してアニメーションを作成します。

CSS スタイル設定は、アニメーション処理中に何度でも変更できます。

% またはキーワード「from」と「to」(0% ～ 100% と同じ) を使用して、いつ変更が発生するかを指定します。

例は次のとおりです:

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

ログイン後にコピー

出力結果:

CSS3でマウスホバー時に360度回転効果を作成する方法