ガラス窓 今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成します。ガラス窓がなければ、雨は家の中に入ってきて、ぶつかるものがなくなります。 <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万件のデータに対するテーブル最適化ソリューション
目次ZabbixはNginxを監視するZabbixはTomcatを監視するZabbixはMySQLを...
目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...
1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...
目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...
Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...
目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...
MySQL データベースが Centos7 システムにインストールされており、オペレーティング シス...
この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...
目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...
目次DockerでTomcatをインストールするtomcatイメージを使用してコンテナを作成する(イ...
** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...
Vue プラグインがエラーを報告しました: このページで Vue.js が検出されましたVueプラグ...
序文みなさんこんにちは。CSS ウィザードの alphardex です。この記事では、three.j...