ホバー時の画像の回転などの動的な動作を Web ページに組み込むと、ユーザー エンゲージメントを高めることができます。円形の境界線を持つ画像に CSS を使用してこの効果を実現するには、次の手順に従います。
1. rotate() による CSS3 トランジション
CSS3 トランジションを利用して、ホバー時に画像をスムーズに回転させます。トランジション プロパティは、アニメーションの継続時間とイージング関数を定義します。この場合、遷移時間を 0.7 秒に設定し、イーズインアウトイージング関数を指定します。
<code class="css">img { transition: transform .7s ease-in-out; }</code>
2.ホバー変換
ホバー時に画像を回転するには、rotate() 関数でtransformプロパティを使用して、希望の回転角度を設定します。この例では、画像を 360 度回転します。
<code class="css">img:hover { transform: rotate(360deg); }</code>
3. HTML の実装
HTML コード内に、適切なソースとサイズの画像要素を配置します。
<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>
サンプル コード
回転画像効果を示す完全なコード サンプルは次のとおりです。
<code class="css">img { border-radius: 50%; transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); }</code>
<code class="html"><img src="path/to/image.jpg" width="100" height="100"></code>
このコードでは、ユーザーが画像の上にマウスを移動すると、画像が 360 度スムーズに回転します。
以上がCSS を使用してホバー起動イメージ スピンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。