ホームページ > 記事 > ウェブフロントエンド > CSS3でマウスホバー時に360度回転効果を作成する方法
CSS3でマウスホバー時に360度回転効果を作成する方法
- WBOYオリジナル
- 2022-03-30 11:48:313039ブラウズ
方法: 1.「element:hover{animation:name time;}」を使用して、マウスがホバーしているときにアニメーション スタイルをバインドします。2.「keyframes name {100%{transform:rotate(360deg)」を使用します。 ;}}" 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>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSS3でマウスホバー時に360度回転効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。