ガラス窓 今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成します。ガラス窓がなければ、雨は家の中に入ってきて、ぶつかるものがなくなります。 <div class='ウィンドウ'></div> .ウィンドウ{ 位置: 絶対; 幅:100vw; 高さ:100vh; 背景: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); 背景サイズ: カバー; 背景位置: 100%; フィルター: ぼかし(10px); } 実際、これは画像に曇りガラスのようなぼかし効果を与えるためのものです。 一滴の雨 雨粒の効果はとても巧妙です。一滴の雨がもたらす全体的な効果を見てみましょう。 この雨滴は実際には 2 つの部分に分かれています。最初の部分は下部の影で、実際には境界線です。コードは次のとおりです。 。国境 { 位置: 絶対; 左マージン: 92px; 上マージン: 51px; 境界線の半径: 100%; ボックスの影: 0 0 0 2px rgba(0, 0, 0, 0.6); 変換: rotateY(0); 幅: 20px; 高さ: 28px; } <div class='border'></div> 境界線は、width 属性と height 属性、border-radius によって楕円形に引き出され、その後、box-shadow によって水滴の影として影が引き出されます。境界線の最終的な効果は次のようになります。 そして水滴の部分があります .raindrop { フィルター: 明るさ(1.2); 位置: 絶対; 左マージン: 90px; 上マージン: 50px; 背景サイズ: 5vw 5vh; 境界線の半径: 100%; 背景画像: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); 変換: 回転(180度)、回転Y(0); 背景位置: 48.1994160428% 54.3259834959%; 幅: 24px; 高さ: 28px; } <div class='雨滴'></div>
影のない単一の水滴の効果は次のとおりです。 ランダムな雨粒 雨は一滴ずつ降ってくることはなく、規則的なパターンで降ってくることもありません。雨粒がガラス窓にランダムに現れるようにするために、css-doodle フレームワークが使用されています。 <css-doodle use="var(--rule)"></css-doodle> まずcss-doodleのカスタムコンポーネントを作成します --ルール: ( :doodle { @グリッド: 10x10/ 100%; オーバーフロー: 表示可能; } 10×10のグリッドを作成し、最大100滴の雨滴が表示されるようにします。 transform:scaleを使用して雨滴をランダムに大きくしたり小さくしたりします :前に { コンテンツ: ''; 位置: 絶対; 左マージン: @var(--mleft); 上マージン: @var(--mtopb); 境界線の半径: 100%; ボックスシャドウ: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6); 変換: rotateY(0); 幅: @var(--widthb); 高さ: @var(--height); } :後 { コンテンツ: ''; フィルター: 明るさ(1.2); 位置: 絶対; 左マージン: @var(--mleft); 上マージン: @var(--mtopa); 背景サイズ: 5vw 5vh; 境界線の半径: 100%; 背景画像: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); 変換: 回転(180度)、回転Y(0); 背景位置: @r(1%, 100%) @r(1%, 100%); 幅: @var(--widtha); 高さ: @var(--height); } ここの :before と :after は見覚えがありますか? 実際、 :before の内容は前の境界線のスタイルであり、 :after の内容は前の雨滴のスタイルです。疑似要素 (before、after) に "content" 属性が設定されていない場合、疑似要素は役に立たず、:before と :after の構成全体が無効になるため、content は必須です。雨滴をより鮮明に見せるために、フィルター:明るさ(1.2)を追加して雨滴を明るく見せます。 ここで奇妙なのは @var() ですが、これは実際には CSS 変数です。これは css-doodle でラップされており、CSS の var() と同じ機能を持ちます。これらの変数の定義を見てみましょう。 --サイズ:(4 + @r(1, 8)); --shadow-size: calc(((@var(--size)*0.3) - 1)*1px); --mleft:@r(1, 100)px; --mtop:@r(1, 100); --mtop1:(@var(--mtop) - 1); --mtopb:calc(@var(--mtop)*1px); --mtopa:calc(@var(--mtop1)*1px); --height:@r(15, 25)px; --width:@r(8, 20); --width1:(@var(--width) + 5); --widthb:calc(@var(--width)*1px); --widtha:calc(@var(--width1)*1px); ここで、いくつかの落とし穴を説明します。 落とし穴 1: css-doodle は @calc() を提供しますが、ここでの計算には CSS の calc() を使用する必要があり、@calc() の使用は無効です。 最終的な効果は次のようになります。 アニメーションなしで窓をノックするにはどうすればいいですか? 雨粒がただ窓に落ちるだけでは、ノックしている感覚がありません。ノックしている感覚を表現するために、雨粒が動くようにすることにしました。 :前に { コンテンツ: ''; 位置: 絶対; 左マージン: @var(--mleft); 上マージン: @var(--mtopb); 境界線の半径: 100%; ボックスシャドウ: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6); 変換: rotateY(0); 幅: @var(--widthb); 高さ: @var(--height); 不透明度: 0; アニメーション: 雨滴落下 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); アニメーション塗りつぶしモード: forwards; アニメーション遅延: @var(--delay); } :後 { コンテンツ: ''; フィルター: 明るさ(1.2); 位置: 絶対; 左マージン: @var(--mleft); 上マージン: @var(--mtopa); 背景サイズ: 5vw 5vh; 境界線の半径: 100%; 背景画像: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); 変換: 回転(180度)、回転Y(0); 背景位置: @r(1%, 100%) @r(1%, 100%); 幅: @var(--widtha); 高さ: @var(--height); 不透明度: 0; アニメーション: 雨滴落下 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); アニメーション塗りつぶしモード: forwards; アニメーション遅延: @var(--delay); } 重要な点は、:before と :after の最後の 3 行がアニメーション効果を実現するために使用されていることです。 cubic-bezier() はアニメーションの速度を制御し、ガラス窓に落ちる雨滴の効果をよりリアルにします。 animation-delay 雨粒が現れる時間はランダムですが、これもエフェクトをよりリアルにするためです。リアルなエフェクトは本当に面倒です。 raindrop-fallの@keyframe設定を見てみましょう @keyframes 雨滴落下 { 0% { 不透明度: 0; 変換: 回転(180度) スケール(2.5, 2.3) rotateY(0); } 100% { 不透明度: 1; 変換: 回転(180度) スケール(1, 1) rotateY(0); } } 要約する 上記は、私が紹介した CSS を使用して雨滴アニメーション効果を実現するためのサンプル コードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: MySQLクエリ最適化: 100万件のデータに対するテーブル最適化ソリューション
目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
概要: Oracle scottユーザーには4つのテーブルがあり、実験やデータ検証に便利です。現在は...
3 つの方法を使用する簡単な例は次のとおりです。インラインスタイル: <!doctypehtm...
負荷リクエスト成功リクエストに失敗しました cmdをクリックし、ファイルパスでEnterキーを押しま...
1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...
この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...
目次1. コンストラクタとインスタンス2. プロパティプロトタイプ3. プロパティ __proto_...
HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...
Redis は、ANSI C で記述されたオープンソースの NoSQL データベースであり、ネットワ...
データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...
ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...
1. キャッシュ - クエリキャッシュ次の図は、MySQL 公式サイトから提供されています: MyS...
必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...
1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...