Comment implémenter un train se déplaçant dynamiquement en utilisant du CSS pur-tutoriel CSS-php.cn

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

不言

Libérer： 2018-07-27 10:43:51

original

2371 Les gens l'ont consulté

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

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

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>

Copier après la connexion

Affichage centré :

body{
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#666, #333);
}

Copier après la connexion

Définir la taille du conteneur :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

.track {
    width: 8em;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!