CSS を使用してマウスホバー時の影効果を実現するためのヒントと方法

CSS を使用してマウスホバー時のシャドウ効果を実装するヒントと方法。具体的なコード例が必要です。

Web デザインでは、マウスオーバー効果は一般的なインタラクションです。方法の一つ。マウスホバー時に要素に特定の効果を表示させることで、ユーザー エクスペリエンスと Web サイトの魅力を向上させることができます。その中でもCSSを利用してマウスホバー時の影効果を実装する方法が一般的で簡単です。この記事では、この手法の実装方法と具体的なコード例を紹介します。

1. シンプルな影効果
まず、CSS を使用して基本スタイルを定義し、マウスをホバーしたときに追加の影効果を追加する必要があります。単純な影効果を実装するサンプル コードを次に示します。

HTML：

マウスオーバー時の影

CSS:
.box {
幅: 200px;
高さ: 200px;
背景色: #f1f1f1;
トランジション: box-shadow 0.3s;
}

# #。 box:hover {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

コードの説明:

HTML 部分、例として、「box」クラスの div 要素を使用します。
• CSS 部分では、div 要素の幅、高さ、背景色を設定し、transition 属性を使用してトランジション効果を定義します。
• div 要素がマウスオーバー状態の場合、:hover セレクターを使用して box-shadow 属性を追加し、シャドウ効果を実現します。

2. マルチレイヤー シャドウ エフェクト

マルチレイヤー シャドウ エフェクトを実現する必要がある場合は、複数の box-shadow アトリビュートを使用して重ね合わせることができます。以下は、マルチレイヤー シャドウ効果を実現するサンプル コードです。

HTML：

マルチレイヤー シャドウ

CSS：

.box {
幅: 200px;
高さ: 200px;
背景色: #f1f1f1;
トランジション: box-shadow 0.3s;
}

.box:hover {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2),

          0 5px 15px rgba(0, 0, 0, 0.4),
          0 10px 20px rgba(0, 0, 0, 0.6);

}

コードの説明:

HTML 部分は前の例と同じです。
• CSS 部分の :hover 疑似クラスでは、3 つの box-shadow 属性を使用して 3 つの影のレイヤーをそれぞれ定義します。
  最初のぼかし半径影のレイヤー 2 番目の影のレイヤーのぼかし半径は 15 ピクセル、透明度は 0.4 です。
  • 影の 3 番目のレイヤーのぼかし半径は 20 ピクセル、透明度は 0.6 です。
  3. 不規則な影の効果
不規則な形の影の効果を実現したい場合は、疑似クラスと変換属性を組み合わせて使用​​できます。以下は、不規則なシャドウ効果を実現するサンプル コードです。

HTML：

Irregular Shadow

CSS：
.box {

幅: 200px;

高さ: 200px;
背景色: #f1f1f1;
遷移: box-shadow 0.3s;
位置: 相対;
オーバーフロー: 非表示;
}

.box::before {
コンテンツ: "";

位置: 絶対;

幅: 100%;
高さ: 100% ;
背景色: rgba(0, 0, 0, 0.4);
変換: 回転(-45度);
上: 50%;
左: -100%;
z -index: -1;
遷移: 変換 0.3 秒;
}

.box:hover::before {
変換: 回転(45 度);

左: 100 % ;

}

コードの説明:

HTML 部分は前の例と同じです。

CSS 部分では、擬似クラス::before を使用して回転された背景レイヤーを作成します。このレイヤーでは、transform:rotate(-45deg) によって 45 度の回転効果を実現できます。
• マウスがホバリングしているときに、:hover 疑似クラスとtransform属性を使用して背景レイヤーの回転角度と位置を変更し、不規則な影の効果を実現します。
• 概要:
この記事では、CSS を使用してマウスホバー時の影効果を実現するテクニックと方法を紹介し、具体的なコード例を示します。これらの基本的な CSS プロパティと疑似クラス セレクターを習得することで、さまざまなマウスオーバー シャドウ効果を簡単に実装でき、Web ページの視覚的な魅力とユーザー エクスペリエンスを向上させることができます。

以上がCSS を使用してマウスホバー時の影効果を実現するためのヒントと方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。