Example code for implementing raindrop animation effect with CSS

Glass Windows

What we are going to achieve today is the raindrop effect. However, before achieving the raindrop effect, we first create the frosted glass effect. Without glass windows, the rain will enter the house, and there will be nothing to knock on.

<div class='window'></div>
.window {
            position: absolute;
            width: 100vw;
            height: 100vh;
            background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            background-size: cover;
            background-position: 100%;
            filter: blur(10px);
}

In fact, it is to give a picture a blurred effect, which looks like frosted glass.

A drop of rain

The effect of raindrops is very clever. Let's take a look at the complete effect of a drop of rain.

This raindrop is actually divided into two parts. The first part is the shadow at the bottom, which is actually a border. The code is as follows:

.border {
            position: absolute;
            margin-left: 92px;
            margin-top: 51px;
            border-radius: 100%;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
            transform: rotateY(0);
            width: 20px;
            height: 28px;
}

<div class='border'></div>

The border is pulled into an ellipse through the width and height attributes and border-radius, and then the shadow is pulled out with box-shadow as the shadow of the water drop. The final effect of the border is as follows:

Then there is the water droplet part

.raindrop {
            filter: brightness(1.2);
            position: absolute;
            margin-left: 90px;
            margin-top: 50px;
            background-size: 5vw 5vh;
            border-radius: 100%;
            background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
            transform: rotate(180deg) rotateY(0);
            background-position: 48.1994160428% 54.3259834959%;
            width: 24px;
            height: 28px;
}
<div class='raindrop'></div>

• The water drop uses background-image to set the glass image as the reflection. The reason why the reflection is a reflection is because the shadow is upside down, so the image is rotated 180 degrees using transform's rotate(), which is just upside down.
• By setting the position of the image in the water droplet through background-position, the reflections of different water drops behind will appear different because the position of the image changes differently, which makes it look real.
• The width of the raindrop is a few pixels larger than the width of the border so that both sides of the water droplet cover the border, leaving only the top and bottom of the border to show shadows.
• The margin-left and margin-top of raindrop are slightly different from those of border, so that the raindrop can be centered on the border, making the fusion of water droplets and shadows more realistic.

The effect of a single water drop without shadow is as follows:

Random Raindrops

Rain never comes one drop at a time, and it never comes in a regular pattern. In order to make raindrops appear randomly on the glass windows, the css-doodle framework is used.

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

First create a custom component of css-doodle

--rule: ( :doodle {
     @grid: 10x10/ 100%;
     overflow: visible;
}

Create a 10*10 grid, so that at most 100 drops of rain can appear

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

Use transform:scale to make raindrops randomly larger or smaller

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
}

:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
 }

Do the :before and :after here look familiar to you? In fact, the content in :before is the style of the previous border, and the content in :after is the style of the previous raindrop. content is required, because if the "content" attribute is not set in the pseudo-element (before, after), the pseudo-element is useless, and the entire configuration in :before and :after will be invalid. In order to make the raindrops appear clearer, filter: brightness(1.2) is added to make the raindrops appear brighter.

The strange thing here is @var(), which is actually a CSS variable. It is wrapped in css-doodle and has the same function as CSS's var(). Let's look at the definitions of these variables.

--size:(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);

Here are a few pitfalls to explain:

Pitfall No. 1: css-doodle provides @calc(), but the calculation here still needs to use CSS's calc(), and using @calc() is invalid.
Pitfall No. 2: When using @var for addition and subtraction, there must be spaces between the + and - signs, otherwise the calculation will be invalid. Remember this.
No. 3 is not a pitfall: After calculating the value, how to add px units? Just use calc(value*1px). This method can also be used for other units.
Explanation No. 4: Why use variables? This is because before and after are not together. In order to keep the margin-left, margin-top, width, height and other properties of border and raindrop consistent, you need to use variables to define them outside before and after and pass the values ​​inside.

The final effect is as follows:

How can I knock on my window without animation?

If the raindrops just fell on the window, there would be no sense of knocking. In order to reflect the knocking, I decided to make the raindrops move.

:before {
    content: '';
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopb);
    border-radius: 100%;
    box-shadow: 0 0 0 @var(--shadow-size) rgba(0, 0, 0, 0.6);
    transform: rotateY(0);
    width: @var(--widthb);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}
:after {
    content: '';
    filter: brightness(1.2);
    position: absolute;
    margin-left: @var(--mleft);
    margin-top: @var(--mtopa);
    background-size: 5vw 5vh;
    border-radius: 100%;
    background-image: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");
    transform: rotate(180deg) rotateY(0);
    background-position: @r(1%, 100%) @r(1%, 100%);
    width: @var(--widtha);
    height: @var(--height);
    opacity: 0;
    animation: raindrop-fall 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    animation-delay: @var(--delay);
}

The key point is that the last three lines in :before and :after are used to achieve the animation effect.

cubic-bezier() controls the speed of the animation, making the effect of raindrops falling on the glass window more realistic.

animation-delay The time when the raindrops appear is random, which is also for the purpose of making the effect more realistic. Realistic effects are really troublesome.

Let's take a look at the @keyframe settings of raindrop-fall

@keyframes raindrop-fall {
    0% {
        opacity: 0;
        transform: rotate(180deg) scale(2.5, 2.3) rotateY(0);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg) scale(1, 1) rotateY(0);
    }
}

Summarize

The above is the example code for using CSS to achieve raindrop animation effects that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!