このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウをアニメーション化する方法 この記事は直訳ではありませんが、この技術は非常に興味深く、有用だと思ったので書きました。 私たちの作品では div { 幅: 100ピクセル; 高さ: 100px; ボックスの影: 0 2px 4px rgba(0, 0, 0, 0.3); } ホバーすると、ボックスの影が はい、もちろん最も簡単な方法は次のとおりです。 div:ホバー{ 幅: 100ピクセル; ボックスの影: 0 5px 15px rgba(0, 0, 0, 0.3); } 遷移アニメーションは 2 つの異なるボックス シャドウ状態で発生するため、ブラウザは遷移アニメーションの間もボックス シャドウを再描画し続けます。また、影はパフォーマンスを集中的に使用するスタイルであるため、この種のアニメーションは多少遅れているように感じられます。 この場合に影のアニメーションを最適化するためのちょっとしたコツを紹介します。 疑似要素と透明度で最適化する 最適化のために疑似要素と透明度を使用して、親 div と同じサイズの before 疑似要素を上記の要素に追加し、必要な最終ボックス シャドウ状態をこの要素に事前に追加しますが、要素の透明度は 0 です。 div { 位置: 相対的; 幅: 100ピクセル; 高さ: 100px; ボックスの影: 0 2px 4px rgba(0, 0, 0, 0.3); } div::before { コンテンツ: ""; 位置: 絶対; 上: 0; 左: 0; 幅: 100%; 高さ: 100%; ボックスの影: 0 5px 15px rgba(0, 0, 0, 0.3); 不透明度: 0; } 次に、ホバー時に、疑似要素の不透明度を 0 から 1 に設定するだけです。 div:hover::before { 不透明度: 1; } これを行う利点は、実際の影の変化は透明度の変化だけであり、影を常に再描画する必要がないため、影のアニメーションの滑らかさが効果的に向上し、より滑らかに見えることです。 CSSプロパティが非常に少ない 最後に、デモをご覧ください: CodePen デモ - ボックスシャドウアニメーションの最適化 既存の問題、別の解決策 元のテキストにある上記の解決策は、最終的な効果として 2 つの影が重ね合わされ、全体的な影の色が少し暗くなる可能性があるため、実際には完璧ではありません。 そのため、最終的な影を微調整し、効果を少し弱めて、2 つの影の重ね合わせた効果が 1 つの影のそれに近づくようにする必要があります。 もちろん、上記のソリューションをさらに最適化することもできます。別の ホバーすると、2 つの疑似要素のうち 1 つが表示され、もう 1 つは非表示になります。このように、最終的な効果は影の重ね合わせのない 1 つの影効果のみとなり、これは影を直接遷移させるのと同じです。 CodePen デモ - ボックスシャドウアニメーションの最適化 要約する 上記はエディターが紹介した CSS シャドウアニメーションの最適化テクニックです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
目次序文記述子getとsetの詳細な説明オブジェクトの属性の乗っ取りオブジェクトのすべてのプロパティ...
目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...
使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...
目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...
目次1. LVS 負荷分散2. 負荷分散LVSの基本紹介3. LVSアーキテクチャ3.1 ロードバラ...
Alibaba Cloud Server を使用している場合は、セキュリティ グループ設定でポート ...
1. ベクターマップベクター グラフィックスは直線と曲線を使用してグラフィックスを表します。これらの...
目次1. DOMとは何か2. 要素を選択する3. getElementById() 4. クエリセレ...
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...
参考までに、win7システム上のVMware仮想マシンにlinux7.2インターネットアクセス構成を...
MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...
オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...
目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....
準備1. 仮想マシンを起動する2. gitツールルートアカウントでログインルートアカウントを使用して...