HTML + CSS implementation of charging water droplet fusion effect code

Time:2021-4-3

First look at the effect:

在这里插入图片描述

preface:

This idea was made by Steven in station B. I thought it was very good, and then I got one myself. (pure CSS)

realization:

Define the label, there are three drop boxes, a circle box shows numbers, and a bottom box:


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

Give the bottom box the basic style. Flex layout, so that the three drops will be arranged vertically in the middle temporarily.


.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); adjust the contrast of the image. If the value is 0%, the image will be completely black. The value is 100%, and the image remains unchanged. The value can exceed 100%, which means that a lower contrast will be used. If no value is set, the default value is 1.

The basic pattern of water droplets. Absolute positioning, so that the three boxes will overlap.


.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); blur the image.

Key point: we give the fuzziness of the water drop box, but the three water drop boxes will present a fuzzy state. Then, we set the image contrast for the bottom box, so that the blurred image will redraw the outline and get the following effect:

在这里插入图片描述

Give the basic style of the circle to display numbers. Remember to set the ambiguity as well. In this way, the image contrast will have the effect of fusion with the falling water droplets.


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

To set animation for water droplets, let them fall from top to bottom, during which the size changes, these can be adjusted slowly and set to their own best effect.


 @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);
            }
        }

After the second and third drops delay time, play the animation again, so that the three drops will fall separately. As for a few seconds, you can adjust them slowly and set them to the best effect you think.


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

Animate the circle that shows the number and let it rotate. During this period, you can let its size or angle change or other changes, the specific value can be adjusted slowly by yourself, and set to the best effect you think.


@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);
            }
        }

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    < title > Aurora Borealis night. </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>

Conclusion:

Here is the article about html + CSS to achieve charging water droplet fusion effect code. For more related HTML water droplet fusion content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!