Hello, I’m Steven.
I’ll show you how to use CSS to create a droplet effect that looks like it merges together when the graphics touch it. Some Android UIs are similarly animated when charging:
This video version of the tutorial at www.bilibili.com/video/BV1S6… , welcome the attention of sanlian!
Part of the HTML
Open the CodePen editor, add a
Part of the CSS
On the CSS side, add the. Container selector, set display to Flex, justify-content and align-items to center, min-height to 100vh. This will center all elements inside the.container and set the background color to black.
Add the body selector and set margin to 0.
Add the.drop selector, set the width and height to 100px, the background color to white, and the rounded corners to 50% to create a circle.
In.container, set the Flex-direction to column so that the three circles are arranged vertically.
Drop :nth-child(2); drop:nth-child(2); And.drop:nth-child(3) specifies a third.
Set some shifts. The second one is translateY(-80px) and the third one is translateY(-130px).
The principle of water point fusion
Add filter: blur(20px) to the.drop selector. This will blur the three circles:
In.container, add the filter: contrast(30) to increase the contrast. This way, you can redraw the blurred edges by improving the contrast, and achieve the effect of blending them together:
In other words, the edges of the blur are black to gray to white, and the effect of increasing the contrast is to treat the light gray as white and the dark gray as black.
Once you understand this principle, animation is easy. Add two more elements to the HTML, a
.
Collection is used to simulate a container that collects water points, and a text like 80% is added to .
On the CSS side, add a.collection selector, similar to the.drop selector, and set the width and height to 100px, the background color to white, the circle Angle to 50%, and the filter to blur(20px).
Add the SPAN selector, set Position to Absolute, font to Helvetica, and text size to 30px. .
animation
Now it’s time to animate. First, add @keyFrames Drop and animate the drop. Add three blocks, 0%, 50% and 100%.
Set Scale (.7) to translateY(), for example, -600%, and set Opacity to 0, so that the water drop will be hidden first.
Then in the 50% block, add the same Settings, set scale to.4, translateY to -80%, and transparency to 1, and the drop will appear.
In 100% of the block, set scale to.3 and translateY to 0px.
Return to the.drop selector and set opacity to 0 to ensure that the drop is hidden at the beginning. Add the animation and set it to 2.5s. The animation name is DROP. This time we will use linear speed and infinite replay animation.
In the: nth-Child (2) and: nth-Child (3) selectors, remove the transform setting and add the delay animation, the second drop delay.5s, and the third drop delay.7s.
Now you can see that the effect of the three drops is complete:
Add the dot animation effect to the water point collection container “Collection”, add @keyFrames Collection, and prepare three blocks, respectively 0%, 50% and 100%.
Rotate (1) rotate(0deg); Rotate to “360deg” and it will rotate once again.
The key changes are set to the 50% block, set scale to 1.3 and zoom in a little bit, rotate to 180deg and rotate to 90px, so that the animation zooms in and turns the circle into an oval as it goes around.
To add more random effects, in the 50% block, set the rounded corner Settings to 40% in the upper left corner and 45% in the lower left corner.
Go back to the.collection selector and add animation. Set the animation to 3s, the name of the animation to Collection, the acceleration to Linear, and infinite.
Let’s see how this case works
That’s all for this episode.
Source code for this case is at codepen. IO /stevenlei/p…
Your support is my motivation, please pay attention to CodingStartup at least, let’s work together!
- B station: space.bilibili.com/451368848
- YouTube: youtube.com/codingstart…
- The Denver nuggets: juejin. Cn/user / 249773…