Comment utiliser CSS pour obtenir un effet animé de points en mouvement

Le contenu de cet article explique comment utiliser CSS pour obtenir l'effet d'animation des points en mouvement. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient 5 éléments, chaque élément représente une petite boule :

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

Affichage centré :

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

Définir la taille du conteneur :

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

Dessiner un point :

.loader {
    position: relative;
}

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

Définir petit L'effet d'animation de la balle se déplaçant de droite à gauche et revenant de gauche à droite :

.loader {
    --duration: 5s;
}

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

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

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

Ajoutez l'effet d'animation de la balle sautant à l'extrême gauche et tombant à l'extrême droite :

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

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

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

Ajoutez l'effet de la balle légèrement aplatie en raison de son mouvement rapide lors du retour de la gauche vers la droite :

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

Définissez des variables pour chacune des cinq balles :<.>

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

Déclarez le nombre de balles :

.loader {
    --dots: 5;
}

Définissez le délai d'animation :

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

Enfin, réduisez la taille en points :

.loader {
    font-size: 20px;
}

Fait !

Recommandations associées :

Comment utiliser CSS et D3 pour obtenir l'effet dynamique d'un vaisseau spatial

Comment utiliser CSS pour obtenir l'effet dynamique d'une animation de rotation changeant de couleur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!