So implementieren Sie einen dynamisch fahrenden Zug mit reinem CSS

Dieser Artikel stellt Ihnen vor, wie Sie mit reinem CSS einen fahrenden Zug realisieren können. Ich hoffe, er kann Freunden in Not helfen.

Effektvorschau

Code-Interpretation

Dom definieren, der Container enthält 2 Elemente, train stellt den Zug dar, track stellt das Eisenbahngleis dar, und die 3 darin enthaltenen <span></span> repräsentieren 3 Schwellen.

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

Zentriert:

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

Containergröße definieren:

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

Zeichne zuerst den Zug.
Zeichnen Sie den Umriss des Zuges:

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

Verwenden Sie das Pseudoelement ::before, um das Fenster zu zeichnen:

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

Verwenden Sie das Pseudoelement ::after, um das Signallicht zu zeichnen am Fenster:

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

Verwenden Sie einen radialen Farbverlauf, um die Lichter zu zeichnen:

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

Zeichnen Sie als Nächstes die Schienen und Schwellen.
Definieren Sie die Breite der Schienen, etwas breiter als der Zug:

.track {
    width: 8em;
}

Verwenden Sie Pseudoelemente, um die Schienen zu zeichnen:

.track {
    position: relative;
}

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

Platzieren Sie die Schienen auf beiden Seiten, um ein visuelles Gefühl von zu erzeugen nah und fern. Effekt:

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

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

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

Zeichnen Sie die Schwelle, die dem Betrachter am nächsten ist. Derzeit überlappen sich die drei Schwellen:

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

Stellen Sie den Animationseffekt der Schiene ein:

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

Richten Sie eine Animationsverzögerung für die anderen beiden Schwellen ein, damit das Gleis so aussieht, als würde es niemals enden:

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

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

Fügen Sie abschließend eine Animation zum Zug hinzu, sodass es aussieht, als würde er leicht wackeln es fährt:

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

Fertig!

Verwandte Empfehlungen:

Wie man mit CSS einen Vogel zeichnet (Code)

Wie man mit reinem CSS einen Cartoon erstellt Papageieneffekt

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen dynamisch fahrenden Zug mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!