HTML+CSSで充電水滴融合特殊効果コードを実現

序文：

このアイデアは、Bilibili のアップロード者 Steven を見て思いつきました。素晴らしいと思ったので、自分でも作ってみました。 (純粋なCSS)

成し遂げる：

3 つのウォータードロップボックス、数字を表示する円形ボックス、および下部ボックスを含むラベルを定義します。

<div class="kuang">
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="quan"></div>
      99%
   </div>

一番下のボックスに基本的なスタイルを設定します。フレックスレイアウト。3 つの水滴が中央に一時的に垂直に配置されるようになります。

.クアン{
            位置: 相対的;
            高さ：100vh;
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            背景色: rgb(5,5,5);
            フィルター:コントラスト(30);
        }

filter: contrast(30);画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値が 100% の場合、画像は変更されません。値は 100% を超える場合があり、その場合はより低いコントラストが使用されます。値が設定されていない場合、デフォルトは 1 になります。

ウォータードロップの基本スタイル。 3 つのボックスが重なるように絶対配置します。

。滴{
           位置: 絶対;
            幅: 100ピクセル;
            高さ: 100px;
            境界線の半径: 50%;
            背景色: rgb(61, 233, 99);
            フィルター: ぼかし(20px);
            アニメーション: 落下 3 秒 線形無限;
            不透明度: 0;
        }

filter: blur(20px); 画像にぼかしを設定します。

ポイント: 水滴ボックスにぼかしを加えると、3 つの水滴ボックスがぼやけて表示されます。次に、下にあるボックスの画像コントラストを設定して、ぼかした画像でアウトラインが再描画され、次の効果が得られるようにします。

ここに画像の説明を挿入

数字を表示する円に基本的なスタイルを指定します。ぼかしも忘れずに設定してください。このようにして、画像のコントラストが落下する水滴と統合されます。

.quan{
            位置: 絶対;
            幅: 100ピクセル;
            高さ: 100px;
            境界線の半径: 50%;
            背景色: rgb(61, 233, 99);
            フィルター: ぼかし(20px);
            アニメーション：zhuan 3s infinite;
        }

水滴が上から下に落ちたり、大きさが変わったりするアニメーションを設定します。これらは自分で調整して、最適と思われる効果に設定できます。

 @keyframes 落ちる{
            0%{
                不透明度: 0;
                変換: スケール(0.8) 移動Y(-500%);               
            }
            50%{
                不透明度: 1;
                変換: スケール(0.5) 移動Y(-100%);
            }
            100%{
                   変換: スケール(0.3) 移動Y(0px);
            }
        }

2 番目と 3 番目の水滴が別々に落ちるように、アニメーションを遅延させて再生します。秒数については、ゆっくりと調整して、最も効果的と思われる秒数に設定できます。

.kuang div:nth-of-type(2){
            アニメーション遅延: 1.5秒;
        }
        .kuang div:nth-of-type(3){
            アニメーション遅延: 2秒;
        }

数字を示す円を回転するようにアニメーション化します。この期間中に、サイズや角度などを変更したり、特定の値を自分でゆっくりと調整して、最適な効果が得られるように設定したりできます。

@keyframes zhuan{
            0%{
              変換: スケール(1) 回転(0度);
            }
            50%{
                変換: スケール(1.1) 回転(180度);
                高さ: 90px;
                左上の境界線の半径: 45%;
                左下の境界線の半径: 48%;

            }
            100%{
                変換:スケール(1)回転(360度);
            }
        }

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>オーロラの夜。 </タイトル>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        .クアン{
            位置: 相対的;
            高さ：100vh;
            ディスプレイ: フレックス;
            flex-direction: 列;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
            背景色: rgb(5,5,5);
            フィルター:コントラスト(30);
        }
        。滴{
           位置: 絶対;
            幅: 100ピクセル;
            高さ: 100px;
            境界線の半径: 50%;
            背景色: rgb(61, 233, 99);
            フィルター: ぼかし(20px);
            アニメーション: 落下 3 秒 線形無限;
            不透明度: 0;
        }
        .kuang div:nth-of-type(2){
            アニメーション遅延: 1.5秒;
        }
        .kuang div:nth-of-type(3){
            アニメーション遅延: 2秒;
        }
        @keyframes 落ちる{
            0%{
                不透明度: 0;
                変換: スケール(0.8) 移動Y(-500%);               
            }
            50%{
                不透明度: 1;
                変換: スケール(0.5) 移動Y(-100%);
            }
            100%{
                   変換: スケール(0.3) 移動Y(0px);
            }
        }
        .quan{
            位置: 絶対;
            幅: 100ピクセル;
            高さ: 100px;
            境界線の半径: 50%;
            背景色: rgb(61, 233, 99);
            フィルター: ぼかし(20px);
            アニメーション：zhuan 3s infinite;
        }
        @keyframes zhuan{
            0%{
              変換: スケール(1) 回転(0度);
            }
            50%{
                変換: スケール(1.1) 回転(180度);
                高さ: 90px;
                左上の境界線の半径: 45%;
                左下の境界線の半径: 48%;

            }
            100%{
                変換:スケール(1)回転(360度);
            }
        }
      スパン{
          位置: 絶対;
          色: rgb(184, 182, 182);
          フォントサイズ: 26px;
          フォントファミリー: 'fangsong';
          フォントの太さ: 太字;
      }
    </スタイル>
</head>
<本文>
    <div class="kuang">
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="quan"></div>
      99%
   </div>
</本文>
</html>

要約:

充電水滴融合特殊効果を実装するための HTML + CSS コードに関するこの記事はこれで終わりです。関連する HTML 水滴融合コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援してください。

<<: CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例

>>: Pure CSS3はdivの出入りを順番に実現します