How to use CSS to achieve an animated effect of moving dots-CSS Tutorial-php.cn

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

不言

Release： 2018-08-03 10:08:56

Original

3543 people have browsed it

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

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

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>

Copy after login

Centered display:

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

Copy after login

Define container size:

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

Copy after login

Draw a dot:

.loader {
    position: relative;
}

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Declare the number of balls:

.loader {
    --dots: 5;
}

Copy after login

Set animation delay:

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

Copy after login

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

.loader {
    font-size: 20px;
}

Copy after login

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!