CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓

今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成します。ガラス窓がなければ、雨は家の中に入ってきて、ぶつかるものがなくなります。

<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>

水滴は、background-image を使用してガラスの画像を反射として設定します。反射が反射である理由は、影が逆さまになっているためで、transform の rotate() を使用して画像を 180 度回転させると、単に逆さまになります。
background-position を通じて水滴内の画像の位置を設定すると、画像の位置が異なって変化するため、背後にあるさまざまな水滴の反射が異なって見え、リアルに見えます。
雨滴の幅は境界線の幅よりも数ピクセル大きいため、水滴の両側が境界線を覆い、境界線の上部と下部だけに影が表示されます。
raindrop の margin-left と margin-top は border の margin-top とわずかに異なり、雨滴を border の中央に配置できるため、水滴と影の融合がよりリアルになります。

影のない単一の水滴の効果は次のとおりです。

ランダムな雨粒

雨は一滴ずつ降ってくることはなく、規則的なパターンで降ってくることもありません。雨粒がガラス窓にランダムに現れるようにするために、css-doodle フレームワークが使用されています。

<css-doodle use="var(--rule)"></css-doodle>

まずcss-doodleのカスタムコンポーネントを作成します

--ルール: ( :doodle {
     @グリッド: 10x10/ 100%;
     オーバーフロー: 表示可能;
}

10×10のグリッドを作成し、最大100滴の雨滴が表示されるようにします。

transform: scale(@rand(.5, .9));

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() の使用は無効です。
落とし穴 2: 加算と減算に @var を使用する場合、+ 記号と - 記号の間にスペースが必要です。そうしないと、計算が無効になります。これを覚えておいてください。
3 番目は落とし穴ではありません。値を計算した後、px 単位を追加するにはどうすればよいでしょうか。calc(value*1px) を使用するだけです。この方法は他の単位にも使用できます。
説明 4: なぜ変数を使用するのですか?これはbeforeとafterが一緒ではないためです。borderとraindropのmargin-left、margin-top、width、heightなどのプロパティを一定に保つためには、beforeとafterの外側に変数を使用して定義し、内側に値を渡す必要があります。

最終的な効果は次のようになります。

アニメーションなしで窓をノックするにはどうすればいいですか?

雨粒がただ窓に落ちるだけでは、ノックしている感覚がありません。ノックしている感覚を表現するために、雨粒が動くようにすることにしました。

：前に {
    コンテンツ： '';
    位置: 絶対;
    左マージン: @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万件のデータに対するテーブル最適化ソリューション

>>: JavaScript配列の簡単な紹介