ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してホバー起動イメージ スピンを作成する方法

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

Mary-Kate Olsen
リリース: 2024-11-03 13:29:02
オリジナル
818 人が閲覧しました

How to Create a Hover-Activated Image Spin with 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="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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート