Comment utiliser du CSS pur pour implémenter l'effet d'animation du chargeur d'une voiture de course (code ci-joint)

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 1 .car élément, et ses 2 sous-éléments représentent respectivement le corps et la roue :

<figure>
    <div>
        <span></span>
        <span></span>
    </div>
</figure>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
}

Définir la taille du conteneur et la couleur de la voiture :

.loader {
    width: 11.7em;
    height: 4.2em;
    color: lightcyan;
    position: relative;
}

Dessiner le châssis :

.car {
    position: absolute;
    width: inherit;
    height: 2em;
    background-color: currentColor;
    top: 1.5em;
    border-radius: 0 5em 1em 0 / 0 4em 1em 0;
}

Dessine la queue :

.car::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 0.6em solid transparent;
    border-left-width: 0;
    border-right-color: currentColor;
    transform-origin: left;
    transform: rotate(-45deg);
    top: -0.5em;
}

(Ça ressemble un peu à un avion en ce moment, haha~~)

Dessine le corps :

.body {
    position: absolute;
    width: 7.5em;
    height: 3.5em;
    box-sizing: border-box;
    border: 0.4em solid;
    border-radius: 3em 4.5em 0 0 / 3em 4em 0 0;
    top: -1.5em;
    left: 1.2em;
}

Utilise un pseudo éléments Dessinez les fenêtres :

.body::before {
    content: '';
    position: absolute;
    width: 3.5em;
    height: inherit;
    background-color: currentColor;
    border-top-left-radius: inherit;
    left: -0.4em;
    top: -0.4em;
}

Dessinez le contour des roues :

.wheels::before,
.wheels::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2.6em;
    height: 2.6em;
    background-color: #333;
    border-radius: 50%;
    bottom: -1em;
}

Dessinez les moyeux de roues :

.wheels::before,
.wheels::after {
    border: 0.3em solid #333;
    background-image: 
        linear-gradient(
            135deg,
            transparent 45%,
            currentColor 46%, currentColor 54%,
            transparent 55%
        ),
        linear-gradient(
            90deg,
            transparent 45%,
            currentColor 46%, currentColor 54%,
            transparent 55%
        ),
        linear-gradient(
            45deg,
            transparent 45%,
            currentColor 46%, currentColor 54%,
            transparent 55%
        ),
        linear-gradient(
            0deg,
            transparent 45%,
            currentColor 46%, currentColor 54%,
            transparent 55%
        ),
        radial-gradient(
            currentColor 29%,
            transparent 30%, transparent 50%,
            currentColor 51%
        );
}

Positionnez les roues à gauche et côtés droits :

.wheels::before {
    left: 1.2em;
}

.wheels::after {
    right: 0.8em;
}

Ensuite, créez l'effet d'animation.

Ajoutez l'élément dom .strikes représentant l'ombre du vent, qui contient 5 sous-éléments :

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

Tracez 5 lignes fines courtes :

.strikes {
    position: absolute;
    width: 1em;
    height: inherit;
    border: 1px dashed white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.strikes span {
    height: 0.1em;
    background-color: lightcyan;
}

Ajouter Pour créer l'effet d'animation du passage de l'ombre du vent, définissez des variables CSS et définissez le délai d'animation :

.strikes span {
    animation: drift 0.2s linear infinite;
    animation-delay: calc((var(--n) - 1) * 0.05s);
}

@keyframes drift {
    from {
        transform: translate(3.5em);
    }

    to {
        transform: translate(-8em);
        filter: opacity(0);
    }
}

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

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

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

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

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

Ajoutez l'effet d'animation de rotation de la roue :

.wheels::before,
.wheels::after {
    animation: rotating 0.5s linear infinite;
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
    }
}

Ajoutez l'effet d'animation du corps bosses :

.car {
    animation: run 0.25s linear infinite;
}

@keyframes run {
    0% {
        transform: translate(0.2em, 0.1em) rotate(0deg);
    }

    20% {
        transform: translate(0.1em, 0.2em) rotate(1deg);
    }

    40% {
        transform: translate(0.1em, -0.1em) rotate(-1deg);
    }

    60% {
        transform: translate(-0.1em, 0.2em) rotate(0deg);
    }

    80% {
        transform: translate(-0.1em, 0.1em) rotate(1deg);
    }

    100% {
        transform: translate(0.2em, 0.1em) rotate(-1deg);
    }
}

C'est fait !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'un texte à rayures arc-en-ciel (avec code)

Comment utiliser le CSS et la couleur mode de mixage pour implémenter l'animation du chargeur Effet (avec code)

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!