Comment utiliser CSS pour réaliser l'effet d'animation du chargeur de montagnes russes

Le contenu de cet article explique comment utiliser CSS pour réaliser l'effet d'animation du chargeur de montagnes russes. 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

Interprétation du code

Définir dom, conteneur Contient 3 éléments, représentant 3 points :

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

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, silver, teal);
}

Définit le diamètre de la grande roue, et les autres longueurs utilisent cette valeur comme échelle de base :

.loader {
    --diameter: 10em;
}

Définissez la taille du conteneur, la largeur est 2 fois la hauteur :

.loader {
    --width: calc(var(--diameter) * 2);
    width: var(--width);
    height: var(--diameter);
}

Définissez les attributs partagés du pseudo-élément :

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    bottom: 0;
}

Dessinez le piste du bas, En même temps, une variable représentant l'épaisseur du trait est définie :

.loader {
    --stroke-width: calc(var(--diameter) / 40);
    color: white;
}

.loader::before {
    width: inherit;
    height: var(--stroke-width);
    background-color: currentColor;
}

Dessinez l'orbite circulaire au milieu :

.loader::after {
    box-sizing: border-box;
    width: var(--diameter);
    height: var(--diameter);
    border: var(--stroke-width) solid;
    border-radius: 50%;
    left: 25%;
}

Dessinez un point, et définissez également une variable représentant le diamètre du point Variables :

.loader {
    --dot-diameter: calc(var(--diameter) / 10);
}

.loader span {
    position: absolute;
    width: var(--dot-diameter);
    height: var(--dot-diameter);
    background-color: currentColor;
    border-radius: 50%;
    bottom: var(--stroke-width);
    left: calc((var(--width) - var(--dot-diameter)) / 2);
}

Ajoutez un effet d'animation pour que les points tournent le long d'une orbite circulaire :

.loader span {
    animation:
        rotating 2s linear infinite;
    --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
    transform-origin: 50% var(--vertical-center);
}

@keyframes rotating {
    0%, 10% {
        transform: rotate(0deg);
    }

    60%, 100% {
        transform: rotate(-1turn);
    }
}

Ajoutez un effet d'animation pour le points à déplacer :

.loader span {
    animation:
        run 2s linear infinite,
        rotating 2s linear infinite;
}

@keyframes run {
    0% {
        left: calc(var(--dot-diameter) * -1);
    }

    10%, 60% {
        left: calc((var(--width) - var(--dot-diameter)) / 2);
    }

    70%, 100% {
        left: calc(var(--width));
    }
}

Définissez un délai d'animation pour les 2 autres points afin que les 3 points ressemblent à 3 chariots côte à côte :

.loader span:nth-child(1) {
    animation-delay: 0.075s;
}

.loader span:nth-child(2) {
    animation-delay: 0.15s;
}

Enfin, masquez le contenu à l'extérieur du conteneur :

.loader {
    overflow: hidden;
}

Articles connexes recommandés :

Exemples de code d'implémentation CSS du changement de navigation

Comment utiliser pure CSS pour obtenir l'effet d'un cochon vert

CSS3 réalise l'effet de bouton de menu mobile (menu)

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!