So implementieren Sie einen dynamisch fahrenden Zug mit reinem CSS-CSS-Tutorial-php.cn

So implementieren Sie einen dynamisch fahrenden Zug mit reinem CSS

不言

Freigeben： 2018-07-27 10:43:51

Original

2375 Leute haben es durchsucht

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

So implementieren Sie einen dynamisch fahrenden Zug mit reinem CSS

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>

Nach dem Login kopieren

Zentriert:

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

Nach dem Login kopieren

Containergröße definieren:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

.track {
    width: 8em;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!