This is the 18th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

This issue will only use CSS to write a charging water drop animation, which can be used as a loading animation in the Web scene. Through this case, we can also understand how CSS can do interpolation blur, a very simple creative animation that can be realized in a few sentences.

Next, let’s take a look at the effect

The effect is ok, there is no feeling in charge, now we are about to roughly from his basic structure, difference blur effect, adhesion animation to it, we set out ~

The body of the

1. Basic structure

<div class="container">
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="drop"></div>
    <div class="collection"></div>
    <span class="progress">75%</span>
</div>
Copy the code
:root{
    --drop-color: rgb(181.249.252);
}
.container {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: # 000;
    flex-direction: column;
}
.drop {
    width: 80px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--drop-color);
    position: absolute;
}

.collection {
    width: 120px;
    height: 120px;
    background-color: var(--drop-color);
    border-radius: 50%;
    position: relative;
}
.progress {
    position: absolute;
    font-size: 32px;
    font-family: fantasy;
    color: # 333;
}
Copy the code
  • Div. Container: The main container will fill the screen with a black background, with a flexible layout that places the content in the center of the screen.
  • Div. drop: This is used to make three drops, so we made it elliptical.
  • Div. collection: Charge the orb as our display box.
  • Div. Progress: Charge progress, just put a static text, do nothing here.

2. The difference is fuzzy

This is a very simple case where just two lines of CSS can make our view look completely different.

.container{
    filter: contrast(30);
}
.collection{
  	filter: blur(20px);
}
Copy the code

We first adjust the contrast value of the input image in the main container. If the value is 0%, the image will be completely black. The value is 100%, and the image doesn’t change, so pick a value that’s appropriate. Then add blur to the container below, so that the contrast of the whole image is improved, and if there is blur, the blurred elements can be ignored and the borders seem to stick together.

Of course, now we only see the contrast change, but when we add the water drop animation, we can see the adhesion effect.

3. Adhesion animation

.drop {
    width: 80px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--drop-color);
    filter: blur(20px);
    position: absolute;
    animation: 3.2 s down linear infinite;
    animation-fill-mode: backwards;
}
.drop:nth-of-type(1) {
    animation-delay: 0s;
}
.drop:nth-of-type(2) {
    animation-delay: 0.5 s;
}

.drop:nth-of-type(3) {
    animation-delay: 0.7 s;
}
.collection {
    width: 120px;
    height: 120px;
    background-color: var(--drop-color);
    filter: blur(20px);
    animation: 8s spin linear infinite;
    border-radius: 50%;
    position: relative;
}
@keyframes down {
    0% {
        opacity: 0;
        transform: translateY(-600%) scale(0.7);
    }
    50% {
        opacity: 1;
        transform: translateY(-100%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(0%) scale(0.45); }}@keyframes spin {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.15) rotate(180deg);
        border-radius: 40% 10% 50% 45%;
    }
    100% {
        transform: scale(1) rotate(360deg); }}Copy the code
  • Water drop animation: we made three water drops here, set their different waiting time of falling, the whole animation is to let it fall from top to bottom, from large to small.
  • Rotation animation: The main box rotates and changes the proportion and size of its rounded corners in the process, appearing to blend with falling water droplets.

And with that, the animation is done, live demo.

conclusion

This article is the same as the previous one, which is for the use of the adhesive effect, is it not very easy to use, I feel I can do a lot of animation ideas, what are you waiting for, let’s experiment with it