原理 ホバーしたときに要素に影を設定します: 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 つだけ指定されている場合、ブラウザではそれらを x 軸のオフセットと y 軸のオフセットとして解釈します。
以下はこのブログシステムで頻繁に使用されるいくつかのスタイルです。 1. マウスオーバーで紙を折ったようなスタイルを再現 コード実装: グラデーション効果を生成するために、ホバー状態に <!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. 紙のフォーカススタイルを模倣したマウスホバー コード実装: 上記との違いは、 <!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. マウスホバーで紙を持ち上げるスタイルを模倣 コード実装: <!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. マウスホバーで紙が浮き上がるような動きを再現(アニメーション実装) コード実装: <!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 での一般的なシェル スクリプト コマンドと関連知識
webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...
目次序文最適化派生的な質問: beforeDestroy はトリガーされませんか?序文タイマーをクリ...
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...
1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...
1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...
目次1. 同期AJAX 2. 非同期AJAX 3. ユーザーのクリックを追跡する4. リバウンドトラ...
複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...
ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...
OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...
問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...