Comment implémenter un train se déplaçant dynamiquement en utilisant du CSS pur

Cet article vous présente comment utiliser du CSS pur pour réaliser un train en mouvement. Il a une bonne valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.

Aperçu de l'effet

Interprétation du code

Définissez dom, le conteneur contient 2 éléments, train représente le train, track représente la voie ferrée, et les 3 <span></span> qu'elle contient représentent 3 traverses.

<p>
    </p><p></p>
    <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(#666, #333);
}

Définir la taille du conteneur :

.loader {
    width: 8em;
    height: 10em;
    font-size: 20px;
}

Dessinez d'abord le train.
Dessinez le contour du train :

.train {
    width: 6em;
    height: 6em;
    color: #444;
    background: #bbb4ab;
    border-radius: 1em;
    position: relative;
    left: 1em;
}

Utilisez le pseudo-élément ::before pour dessiner la fenêtre :

.train::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 2.3em;
    background-color: currentColor;
    border-radius: 0.4em;
    top: 1.2em;
    left: 10%;
}

Utilisez le pseudo-élément ::after pour dessiner le window Les feux de signalisation :

.train::after {
    content: '';
    position: absolute;
    width: 25%;
    height: 0.4em;
    background-color: currentColor;
    border-radius: 0.3em;
    top: 0.4em;
    left: calc((100% - 25%) / 2);
}

Utilisez le dégradé radial pour dessiner les feux :

.train {
    background: 
        radial-gradient(circle at 20% 80%, currentColor 0.6em, transparent 0.6em),
        radial-gradient(circle at 80% 80%, currentColor 0.6em, transparent 0.6em),
        #bbb;
}

Dessinez ensuite les rails et les traverses.
Définissez la largeur des rails, légèrement plus larges que le train :

.track {
    width: 8em;
}

Dessinez les rails avec des pseudo éléments :

.track {
    position: relative;
}

.track::before,
.track::after {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 4em;
    background-color: #bbb;
    border-radius: 0.4em;
}

Placez les rails des deux côtés et formez un presque grand Effet visuel lointain et petit :

.track::before,
.track::after {
    transform-origin: bottom;
}

.track::before {
    left: 0;
    transform: skewX(-27deg);
}

.track::after {
    right: 0;
    transform: skewX(27deg);
}

Dessinez les traverses, ce qui est l'effet le plus proche de l'observateur. Actuellement, les trois traverses se chevauchent :

.track span {
    width: inherit;
    height: 0.3em;
    background-color: #bbb;
    position: absolute;
    top: 4em;
}

Placez les rails. Effets d'animation :

.track span {
    animation: track-animate 1s linear infinite;
}

@keyframes track-animate {
    0% {
        transform: translateY(-0.5em) scaleX(0.9);
        filter: opacity(0);
    }

    10%, 90% {
        filter: opacity(1);
    }

    100% {
        transform: translateY(-4em) scaleX(0.5);
        filter: opacity(0);
    }
}

Définissez des délais d'animation pour les 2 autres traverses pour donner l'impression que la voie ne se terminera jamais :

.track span:nth-child(2) {
    animation-delay: -0.33s;
}

.track span:nth-child(3) {
    animation-delay: -0.66s;
}

Enfin, ajoutez une animation au train L'effet semble comme s'il tremblait légèrement en conduisant :

.train {
    animation: train-animate 1.5s infinite ease-in-out;
}

@keyframes train-animate {
    0%, 100% {
        transform: rotate(0deg);
    }

    25%, 75% {
        transform: rotate(0.5deg);
    }

    50% {
        transform: rotate(-0.5deg);
    }
}

C'est fini !

Recommandations associées :

Comment utiliser le CSS pour dessiner un oiseau (code)

Comment utiliser du CSS pur pour créer un dessin animé Effet perroquet

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!