BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

html+css 充電水滴の融合効果コード

2022-01-21 23:01:38

最初にエフェクトを見る。

序文

このアイデアは、BサイトのオーナーであるStevenが作ったもので、素晴らしいと思ったので自分でも作ってみました。(純粋なcss)

実装を行います。

3つのティアドロップボックス、数字を示す丸いボックス、そして一番下のボックスでタグを定義します。 

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

下のボックスに基本的なスタイルを与えます。フレックスレイアウトで、3つのドロップがとりあえず縦中央になるようにします。 

.kuang{
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(5,5,5);
            filter: contrast(30);
        }

filter: contrast(30); 画像のコントラストを調整します。0%の場合、画像は真っ黒になります。100%にすると、画像はそのままになります。100%より大きい値を指定すると、コントラストが弱くなります。値が設定されていない場合、デフォルトは1です。

水滴の基本スタイルです。3つのボックスが重なるように絶対配置します。 

.droplet{
           position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: fall 3s linear infinite;
            opacity: 0;
        }

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

フォーカスします。ドロップレットボックスにぼかしをかけると、3つのドロップレットボックスがぼやけた外観になります。続いて、一番下のボックスに画像のコントラストを設定し、ぼかした画像で輪郭を再描画すると、次のような効果が得られます。

数字を表示する円形に基本スタイルを設定します。ぼかしの設定も忘れずに。これは、画像のコントラストで、落ちてくる水滴とブレンドする効果があるようにするためです。 

.quan{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: zhuan 3s infinite;
        }

水滴が上から下へ落ちるようにアニメートし、その間に大きさを変えます。時間をかけて、最も効果的と思われるものに設定してください。 

 @keyframes fall{
            0%{
                opacity: 0;
                transform: scale(0.8) translateY(-500%);               
            }
            50%{
                opacity: 1;
                transform: scale(0.5) translateY(-100%) ;
            }
            100%{
                   transform: scale(0.3) translateY(0px);
            }
        }

2滴目と3滴目は、アニメーションを再生する前にしばらく遅延させて、3つの滴が別々に落下するようにしています。 

.kuang div:nth-of-type(2){
            animation-delay: 1.5s;
        }
        .kuang div:nth-of-type(3){
            animation-delay: 2s;
        }

数字を表示する円が回転するようにアニメートします。この間、大きさや角度などを変化させることができるので、正確な値をじっくりと微調整して、ベストと思われる値に設定してください。 

@keyframes zhuan{
            0%{
              transform: scale(1) rotate(0deg);
            }
            50%{
                transform: scale(1.1) rotate(180deg);
                height: 90px;
                border-top-left-radius: 45%;
                border-bottom-left-radius: 48%;

            }
            100%{
                transform:scale(1) rotate(360deg);
            }
        }

フルコードです。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Night of the Northern Lights. </title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .kuang{
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(5,5,5);
            filter: contrast(30);
        }
        .droplet{
           position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: fall 3s linear infinite;
            opacity: 0;
        }
        .kuang div:nth-of-type(2){
            animation-delay: 1.5s;
        }
        .kuang div:nth-of-type(3){
            animation-delay: 2s;
        }
        @keyframes fall{
            0%{
                opacity: 0;
                transform: scale(0.8) translateY(-500%);               
            }
            50%{
                opacity: 1;
                transform: scale(0.5) translateY(-100%) ;
            }
            100%{
                   transform: scale(0.3) translateY(0px);
            }
        }
        .quan{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(61, 233, 99);
            filter: blur(20px);
            animation: zhuan 3s infinite;
        }
        @keyframes zhuan{
            0%{
              transform: scale(1) rotate(0deg);
            }
            50%{
                transform: scale(1.1) rotate(180deg);
                height: 90px;
                border-top-left-radius: 45%;
                border-bottom-left-radius: 48%;

            }
            100%{
                transform:scale(1) rotate(360deg);
            }
        }
      span{
          position: absolute;
          color: rgb(184, 182, 182);
          font-size: 26px;
          font-family: 'fangsong';
          font-weight: bold;
      }
    </style>
</head>
<body>
    <div class="kuang">
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="droplet"></div>
      <div class="quan"></div>
      <span>99%</span>
   </div>
</body>
</html>

概要

html+css充電水滴融合効果コードについてのこの記事は、このに導入され、より関連するhtml水滴融合コンテンツは、スクリプトハウス以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します