マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理

ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします。

box-shadow 式については、MDN を参照してください。

/* x オフセット | y オフセット | 影の色 */
ボックスシャドウ: 60px -16px ティール;

/* x オフセット | y オフセット | 影のぼかし半径 | 影の色 */
ボックスの影: 10px 5px 5px 黒;

/* x オフセット | y オフセット | 影のぼかし半径 | 影の広がり半径 | 影の色 */
ボックスの影: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 挿入 (内側に影) | x オフセット | y オフセット | 影の色 */
box-shadow: インセット 5em 1em ゴールド;

/* 任意の数の影をカンマで区切って指定します*/
ボックスの影: 3px 3px 赤、-1em 0 0.4em オリーブ;

単一のボックスシャドウを指定するには:

2 つ、3 つ、または 4 つの数値が与えられます。

値が 2 つだけ指定されている場合、ブラウザではそれらを x 軸のオフセットと y 軸のオフセットとして解釈します。
3 番目の値が指定された場合、それはぼかし半径のサイズとして解釈されます。
4 番目の値が指定されている場合は、拡張半径のサイズとして解釈されます。

オプション、インセット（内側への影）。
オプション、色の値。

以下はこのブログシステムで頻繁に使用されるいくつかのスタイルです。

1. マウスオーバーで紙を折ったようなスタイルを再現

コード実装:

グラデーション効果を生成するために、ホバー状態にtransition属性が追加されます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>マウスホバーで折り紙のスタイルをシミュレート</title>
</head>
<スタイル タイプ="text/css">
  /* コアスタイル */
  .カード{
    幅: 300ピクセル;
    高さ: 180ピクセル;
    境界線: 10px 実線 #FFF;
    border-bottom: 0 なし;
    背景色: #FFF;
    ボックスシャドウ: 0 1px 1px 0 rgba(0, 0, 0, .15)
  }

  .card:hover {
    ボックスの影: 0 5px 5px 0 rgba(0, 0, 0, .25);
    遷移: すべて .2 秒のイーズイン アウト。
  }

  /* 非コアスタイル */
  .カードヘッダー{
    テキスト配置: 中央;
  }

  .card-body、.card-footer {
    テキスト配置: 左;
  }
</スタイル>
<body style="background: #e3e3e3;">
<div class="カード">
  <div class="カードヘッダー">
    <p>これはカードです</p>
  </div>
  <div class="カード本体">
    <p>説明: マウスをホバーすると、紙を折ったときのような効果が得られます</p>
  </div>
  <div class="カードフッター">
    <p>原則: Y軸のオフセットと影の拡散半径（2番目と3番目の数字）を変更します</p>
  </div>
</div>
</本文>
</html>

2. 紙のフォーカススタイルを模倣したマウスホバー

コード実装:

上記との違いは、 box-shadowプロパティの具体的な値（y 軸上のオフセットと影の拡散半径、つまり 2 番目と 3 番目の数値）を調整する点です。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>マウスホバーで紙のフォーカススタイルをシミュレート</title>
</head>
<スタイル タイプ="text/css">
  /* コアスタイル */
  .カード{
    パディング: 10px;
    幅: 300ピクセル;
    高さ: 180ピクセル;
    背景色: #FFF;
    ボックスシャドウ: なし;
  }

  .card:hover {
    ボックスの影: 0 1px 6px 0 rgba(0, 0, 0, .2);
    境界線の色: #eee;
    遷移: すべて .2 秒のイーズイン アウト。
  }

  /* 非コアスタイル */
  .カードヘッダー{
    テキスト配置: 中央;
  }

  .card-body、.card-footer {
    テキスト配置: 左;
  }
</スタイル>
<body style="background: #e3e3e3;">
<div class="カード">
  <div class="カードヘッダー">
    <p>これはカードです</p>
  </div>
  <div class="カード本体">
    <p>説明: マウスをホバーすると、紙全体に焦点が合います</p>
  </div>
  <div class="カードフッター">
    <p>原則: Y軸のオフセットと影の拡散半径（2番目と3番目の数字）を変更します</p>
  </div>
</div>
</本文>
</html>

3. マウスホバーで紙を持ち上げるスタイルを模倣

コード実装:

box-shadowプロパティとtransformプロパティを組み合わせます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>マウスホバーで紙を持ち上げるスタイルをシミュレート</title>
</head>
<スタイル タイプ="text/css">
  /* コアスタイル */
  .カード{
    パディング: 10px;
    幅: 300ピクセル;
    高さ: 180ピクセル;
    背景色: #FFF;
    境界線: なし;
    境界線の半径: 6px;
    -webkit-transition: すべて 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    遷移: すべて 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    ボックスの影: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    変換: translate(0,-5px);
    遷移遅延: 0秒 !重要;
  }

  .box-shadow {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
    ボックスの影: 0 4px 16px rgba(48, 55, 66, 0.15);
  }

  /* 非コアスタイル */
  .カードヘッダー{
    テキスト配置: 中央;
  }

  .card-body、.card-footer {
    テキスト配置: 左;
  }
</スタイル>
<body style="background: #e3e3e3;">
<div class="カードボックスシャドウ">
  <div class="カードヘッダー">
    <p>これはカードです</p>
  </div>
  <div class="カード本体">
    <p>説明: マウスをホバーすると、紙全体が持ち上がります</p>
  </div>
  <div class="カードフッター">
    <p>原則: 変換属性を追加する</p>
  </div>
</div>
</本文>
</html>

4. マウスホバーで紙が浮き上がるような動きを再現（アニメーション実装）

コード実装:

@keyframesルールを使用して、1 つの CSS スタイルセットを別の CSS スタイルセットに徐々に変更するアニメーションを作成します。
ホバー時にアニメーションを実行します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>マウスをホバーすると、紙が浮き上がるようなスタイルをシミュレートします</title>
</head>
<スタイル タイプ="text/css">
  /* コアスタイル */
  .カード{
    パディング: 10px;
    幅: 300ピクセル;
    高さ: 180ピクセル;
    背景色: #FFF;
    境界線: なし;
    境界線の半径: 6px;
    -webkit-transition: すべて 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    遷移: すべて 250ms cubic-bezier(.02, .01, .47, 1);
  }

  .card:hover {
    アニメーション: 0.0001 秒の線形飛行;
    アニメーション塗りつぶしモード: 両方;
  }

  @keyframes フライ {
    0% {
      ボックスの影: 2px 2px 2px #e2dede、-2px 2px 2px #e2dede;
    }
    100% {
      ボックスの影: 6px 8px 12px #e2dede、-6px 8px 12px #e2dede;
    }
  }

  /* 非コアスタイル */
  .カードヘッダー{
    テキスト配置: 中央;
  }

  .card-body、.card-footer {
    テキスト配置: 左;
  }
</スタイル>
<body style="background: #e3e3e3;">
<div class="カードボックスシャドウ">
  <div class="カードヘッダー">
    <p>これはカードです</p>
  </div>
  <div class="カード本体">
    <p>説明: マウスをホバーすると紙全体が浮き上がります</p>
  </div>
  <div class="カードフッター">
    <p>仕組み: @keyframes ルールを使用してアニメーションを作成する</p>
  </div>
</div>
</本文>
</html>

上記は、マウスをカードの上に置いたときにカードがフローティングする効果を CSS を使用して実現する方法の例の詳細です。マウスをカードの上に置いたときにカードがフローティングする効果を CSS を使用して実現する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<: Vue2とVue3のライフサイクルの比較の詳細な理解

>>: Linux での一般的なシェルスクリプトコマンドと関連知識