HTML+CSS to achieve charging water drop fusion special effects code

Preface:
accomplish:
Summarize:

First look at the effect:

insert image description here

Preface:

I came up with this idea after seeing the up-loader Steven on Bilibili. I thought it was great, so I made one myself. (pure CSS)

accomplish:

Define a label with three water drop boxes, a circle box to display numbers, and a bottom box:

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

Give the bottom-most box basic styling. Flex layout, so that the three water drops will be temporarily arranged vertically in the center.

.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);Adjusts the contrast of the image. A value of 0% will make the image completely black. At a value of 100%, the image remains unchanged. Values can exceed 100%, meaning a lower contrast will be used. If no value is set, the default is 1.

The basic style of the water drop. 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); sets blur to the image.

Key point: We give the water drop box blur, so the three water drop boxes will appear blurred. Next, we set the image contrast for the underlying box so that the blurred image will redraw the outline and get the following effect:

insert image description here

Give the circle that will display the number a basic style. Remember to set the blur as well. In this way, the image contrast will be integrated with the falling water drops.

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

Set animations for the water drops, so that they fall from top to bottom and change in size. You can adjust these by yourself and set them to the effect you think is best.

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

Play the animation after a delay for the second and third water drops, so that the three water drops will fall separately. As for the number of seconds, you can adjust it slowly and set it to what you think is the best effect.

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

Animate the circle showing the number so it spins. During this period, you can make its size or angle undergo or other changes. You can slowly adjust the specific values yourself and set them to what you think is the best effect.

@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>Northern Lights 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>
      99%
   </div>
</body>
</html>

Summarize:

This is the end of this article about the HTML+CSS code for implementing charging water drop fusion special effects. For more related HTML water drop fusion content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: An example of implementing a simple finger click animation with CSS3 Animation

>>: Pure CSS3 realizes the effect of div entering and exiting in order