web front-end entry to the real: CSS animation effects to achieve raindrop

Glass window

Today we want to achieve is a raindrop effect, but the former achieve raindrops, we first get out of frosted glass effect, no windows, rain have entered the room, there Sha good beating.

<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, is to give a picture, made a blurring effect, looks like frosted glass effect

A drop of rain

The effect of raindrops is very clever, let's look at the next drop of rain complete renderings

This drop of rain is actually divided into two portions, a first portion of the bottom portion of the shadow, to the border is in fact, as follows:

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.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>

By the width and height attributes border-radius and the border drawn into an ellipse, then the shadow box-shadow pulled out, as the shadow of the water droplets, the effect of the final frame as follows:

Then drop is part of

.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>

• Water droplets with background-image set as glass picture reflection, reflection is a reflection of the reason is because the shadow is backwards, so use the rotate transform () rotate the picture 180, just upside down
• In the position shown droplets of different drop back will show through the background-position setting picture reflection because of changes in the position of the picture is different, it is true
• raindrop's border width than the width of a few pixels, is to make both sides of the water droplets cover the border, leaving only the upper and lower border of the display shadows
• margin-left and margin-top and border of the raindrop is also slightly different, in order to be able to center the raindrop covered in the border top, making more realistic drop shadow and integration

Unshaded individual droplets results are as follows:

Random raindrops

Rain is never to drop by drop, but it will not be very regular, in order to allow raindrops css-doodle frame randomly appear at the window.

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

First create a css-doodle custom components

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

Play 10 * 10 grid, which can occur up to 100 drops of rain

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

By transform: scale make random raindrops change into small

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

Here: before and: after we see is not very familiar, in fact: before the contents of which is in front of border styles,: after which is in front of raindrop style. content must be, because in pseudo-elements (before, after) if there is no set "content" attribute, pseudo-elements is useless, the whole: before and: after which they all invalid configuration. To make raindrops appear clearer, plus a filter: brightness (1.2) let the raindrops appear brighter.

There is rather strange @var (), it is actually css variables in css-doodle do var a layer of packaging, and the role of css () is the same, we look at the definition 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 pit to explain:

• 1st hole: css-doodle offers @calc (), but the calculation here is to use css of calc (), using @calc () is invalid.
• 2nd hole: When using @var do addition and subtraction, + - to have twice the number of spaces, otherwise invalid calculation, remember to remember.
• No. 3 is not a pit: After calculating good value, how to bring it px units, with calc (value * 1px) This method can be, and other units can also use this method.
• 4 Description: Why use a variable? Because before and after are not together, in order to allow boder and raindrop of margin-left, margin-top, width, height and other attributes can be consistent, you need to use variables defined outside before and after a good, traditional values ​​to go inside.

The final results are as follows:

No knock on my window animation effects how

If only this rain sprinkled on the windows, there is no beating the meaning, in order to reflect the beat, I decided to let the rain moving.

: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);
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Focus is: before and: after which the last three lines, is used to achieve animation effects.

• cubic-bezier () controls the speed of the animation, so that the effect of raindrops fall more realistic windows
• Random time animation-delay occurring rain, to the same effect is more realistic, real trouble realistic effect

Let's look at @keyframe set 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);
    }
}