Getting Started with the web Front End to Practice: CSS for Raindrop Animation

<div></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); }

It's just a picture that blurs and looks like frosted glass

The effect of rain drops is clever, let's see the complete effect of the next drop of rain

The rain 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:

Specially established learning Q-q-u-n ⑦⑧④-⑦⑧③-Fatal Frame①② Share learning methods and small details that need attention, communicate with each other, and keep updating the latest tutorials and learning techniques (from zero basics to WEB Front-end project hands-on tutorials, learning tools, full stack development learning routes and planning) .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></div>

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

Then the part of the water droplet

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

• Water droplets use background-image to set a picture of glass as a reflection. The reflection is inverted because the shadow is inverted, so the picture 180 is rotated with transform ed rotate(), which happens to be inverted
• Set the display position of the picture on the background-position. Different water droplets will show the reflection on the back because the position of the picture varies, which is true
• raindrop's width is several pixels larger than border's so that the two sides of the water drop cover the border, leaving only the top and bottom shadows of the border
• The margin-left and margin-top and border of raindrop are also slightly different in that they can be centered over the border, making the fusion of water droplets and shadows more realistic

The effect of shadowless water droplets alone is as follows:

Rain never comes in drops, and it doesn't come very regularly. To make the raindrops appear on the windows at random, the css-doodle frame.

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

Create a custom component for css-doodle s first

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

Make 10*10 grid s so that up to 100 drops of rain can occur

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

Randomly enlarges and decreases raindrops through transform:scale

: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 everybody can see if they are familiar. In fact, what is inside beforeis the style of the front border, and what is inside afteris the style of the front raindrop.Content must be, because if the "content" attribute is not set in a pseudo element (before, after), the pseudo element is useless, and the entire configuration inside: before and: after is invalid.To make the raindrops appear clearer, add filter: brightness(1.2) to make the raindrops appear brighter.

What's odd here is @var(), which is actually a variable of css, wrapped in the css-doodle and acts like css's var(), so let's 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 pits to illustrate:

• Pit 1: The css-doodle s provide @calc(), but the calculation here uses css's calc(), which is not valid with @calc().
• Pit 2: When using @var for addition and subtraction, the ++ sign should have spaces twice, otherwise the calculation is invalid, remember.
• No. 3 is not a pit: after calculating the value, how do you take the PX units with you? Use calc(value*1px) as the method is OK. Other units can also use this method.
• Explanation 4: Why use variables?Because before and afterare not together, in order for the margin-left, margin-top, width, height s and other attributes of the boder and raindrop to be consistent, variables need to be defined outside of before and afterand passed in values.

The final results are as follows:

If the rain just sprinkles on the window like this, it doesn't mean to knock. In order to reflect the knock, I decided to let the rain 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); } //Specially established learning Q-q-u-n93

The main point is: before and: after, the last three lines are used to achieve the animation effect.

• cubic-bezier() controls the speed of the animation, making it more realistic for raindrops to fall into the glass window
• The animation-delay raindrops occur at random times, but they are also designed to make the effect more realistic and more difficult to achieve.

Take a look at the @keyframe settings for 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); } }

15 January 2020, 12:33 | Views: 8603