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

マウスがカード上に移動したときにフローティング効果を実現する 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 での一般的なシェル スクリプト コマンドと関連知識

推薦する

MySQL Community Server 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...

上下に空白行があるフォームを挿入する解決策

ウェブページを作成するときに、フォームを挿入した後、フォームの上下に空白行が表示されることがよくあり...

スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...

画像をラベルとして使用すると、IE では for 属性が機能しません。

例えば:コードをコピーコードは次のとおりです。 <input type="check...

MySQLチュートリアルではストアドプロシージャを徹底的に理解します

目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

Windows での MySQL 5.7.10 のインストールと設定のチュートリアル

MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...

DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...

Founder フォント ライブラリの中国語と英語のファイル名比較表

Founder Type Library は、Founder Type Library ビジネス チ...

nginx を使用してカナリアリリースをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してカナリア リリースを最も簡単な...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

Vue の高度な使用方法チュートリアル 動的コンポーネント

目次基本的な説明AST 解析レンダリング機能通常コンポーネントと動的コンポーネントの比較ファクトリ関...

MySQL 5.7.31 64 ビット無料インストール版チュートリアル図

1. ダウンロードダウンロードアドレス: https://dev.mysql.com/get/Dow...

Docker tomcatのメモリサイズを設定する方法

Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...