CSS を使用してホバー起動イメージ スピンを作成する方法

ホバー時の画像回転

ホバー時の画像の回転などの動的な動作を 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="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS を使用してホバー起動イメージ スピンを作成する方法" ></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="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS を使用してホバー起動イメージ スピンを作成する方法" ></code>

このコードでは、ユーザーが画像の上にマウスを移動すると、画像が 360 度スムーズに回転します。

以上がCSS を使用してホバー起動イメージ スピンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。