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

推薦する

html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。

webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...

Vueでタイマーをエレガントにクリアする方法

目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します

CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...

Vueは3段階のナビゲーション表示と非表示を実装します

この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...

Docker デプロイメント RabbitMQ コンテナ実装プロセス分析

1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...

Jmeterはデータベースプロセスダイアグラムに接続します

1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...

CSS floatプロパティの詳細な説明

1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...

JSでユーザーを追跡する方法

目次1. 同期AJAX 2. 非同期AJAX 3. ユーザーのクリックを追跡する4. リバウンドトラ...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

Zabbix上のすべてのホストのIPとホスト名を取得する

ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...

MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)

目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....

Dockerコンテナの起動失敗を解決する方法

質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...

OpenShift のクイックインストールの詳細な手順

OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...