How to use CSS to achieve an animated effect of moving dots

The content of this article is about how to use CSS to achieve the animation effect of moving dots. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

Source code download

https://github. com/comehope/front-end-daily-challenges

Code Interpretation

Define dom, the container contains 5 elements, each element represents a small ball:

<p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</p>

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, sienna, maroon);
}

Define container size:

.loader {
    width: 6em;
    height: 1em;
    font-size: 40px;
}

Draw a dot:

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    left: 5em;
}

Define the ball moving from right to left and from The animation effect of the left side returning to the right side:

.loader {
    --duration: 5s;
}

.loader span {
    animation: 
        walk linear infinite;
    animation-duration: var(--duration);
}

@keyframes walk {
    0%, 95%, 100% {
        left: 5em;
    }

    80%, 85% {
        left: 0;
    }
}

Then add the animation effect of the ball jumping up at the far left end and falling down at the far right end:

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite;
}

@keyframes jump {
    80%, 100% {
        top: 0;
    }

    85%, 95% {
        top: -1em;
    }
}

Add the animation effect of the ball at the far left end When returning from the left to the right, the effect of being slightly squashed due to fast movement:

.loader span {
    animation: 
        walk linear infinite,
        jump linear infinite,
        squash linear infinite;
}

@keyframes squash {
    80%, 100% {
        width: 1em;
        height: 1em;
    }

    90% {
        width: 2em;
        height: 0.8em;
    }
}

Define variables for the 5 balls:

.loader span:nth-child(1) {
    --n: 1;
}

.loader span:nth-child(2) {
    --n: 2;
}

.loader span:nth-child(3) {
    --n: 3;
}

.loader span:nth-child(4) {
    --n: 4;
}

.loader span:nth-child(5) {
    --n: 5;
}

Declare the number of balls:

.loader {
    --dots: 5;
}

Set animation delay:

.loader span {
    animation-delay: calc(var(--n) * var(--duration) / var(--dots) * -1);
}

Finally, change the size of the points to be smaller:

.loader {
    font-size: 20px;
}

You’re done!

Related recommendations:

How to use CSS and D3 to achieve the dynamic effect of a spaceship

How to use CSS to achieve the dynamic effect of a color-changing rotation animation

The above is the detailed content of How to use CSS to achieve an animated effect of moving dots. For more information, please follow other related articles on the PHP Chinese website!