So erzielen Sie mit CSS den LKW-Lader-Effekt

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS, um den Effekt eines LKW-Laders zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

Codeinterpretation

Definition dom, der Container stellt den LKW dar, und die beiden enthaltenen Unterelemente stellen die Front und den Auspuff dar. <hr> stellt die Straße dar:

<div>
    <span></span>
    <span></span>
</div>
<hr>

wird in der Mitte angezeigt, während zwischen der Straße und der Seite Platz bleibt :

body {
    margin: 10%;
    padding-top: 10%;
}

Verlassen Sie die LKW-Kabine:

.truck {
    width: 15em;
    height: 5em;
    font-size: 10px;
    background-color: #444;
    border-radius: 0.4em;
}

Verwenden Sie Pseudoelemente, um die Räder der Kabine zu zeichnen:

.truck {
    position: relative;
}

.truck::before,
.truck::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2em;
    height: 2em;
    background-color: #444;
    border: 0.1em solid white;
    border-radius: 50%;
    bottom: -1em;
}

.truck::before {
    left: 0.6em;
}

.truck::after {
    right: 0.6em;
}

Zeichnen Sie die Vorderseite des LKWs:

.cab {
    position: absolute;
    width: 3.3em;
    height: 2.5em;
    background-color: #333;
    left: -3.5em;
    bottom: 0;
    border-radius: 40% 0 0.4em 0.4em;
}

.cab::before {
    content: '';
    position: absolute;
    width: 2em;
    height: 1.5em;
    background-color: #333;
    top: -1.5em;
    right: 0;
    border-radius: 100% 0 0 0;
}

Zeichnen Sie die Räder der Vorderseite des Lastwagens:

.cab::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 2em;
    height: 2em;
    background-color: #444;
    border: 0.1em solid white;
    border-radius: 50%;
    bottom: -1em;
    left: 0.5em;
}

Zeichnen Sie den Anfangszustand des Abgases:

.smoke,
.smoke::before,
.smoke::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: #333;
    right: -0.1em;
    bottom: -0.5em;
    border-radius: 50%;
}

Erhöhen Sie die Animation des Abgases:

.smoke {
    animation: smoke-1 2s infinite;
}

.smoke::before {
    animation: smoke-2 2s infinite;
}

.smoke::after {
    animation: smoke-3 2s infinite;
}

@keyframes smoke-1 {
    to {
        width: 3em;
        height: 3em;
        right: -3em;
        bottom: 0.5em;
    }
}

@keyframes smoke-2 {
    to {
        width: 2.5em;
        height: 2.5em;
        right: -6em;
        bottom: 0.8em;
    }
}

@keyframes smoke-3 {
    to {
        width: 3.5em;
        height: 3.5em;
        right: -4em;
        bottom: 0.2em;
    }
}

Erhöhen Sie den Drifteffekt von Abgasen:

.smoke {
    animation:
        drift 2s infinite,
        smoke-1 2s infinite;
}

.smoke::before {
    animation: 
        drift 3s infinite,
        smoke-2 3s infinite;
}

.smoke::after {
    animation: 
        drift 4s infinite,
        smoke-3 4s infinite;
}

@keyframes drift {
    0%, 100% {
        filter: opacity(0);
    }

    15% {
        filter: opacity(0.9);
    }
}

Erhöhen Sie den Animationseffekt von LKW-Fahrten:

.truck {
    animation: 
        move 5s infinite;
}

@keyframes move {
    0% {
        margin-left: 90%;
    }

    50% {
        margin-left: 45%;
    }

    100% {
        margin-left: 0;
    }

    0%, 100% {
        filter: opacity(0);
    }

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

Fügen Sie den Animationseffekt von Unebenheiten beim Fahren der Karte hinzu:

.truck {
    animation: 
        put-put 2s infinite,
        move 10s infinite;
}

@keyframes put-put {
    0% {
        margin-top: 0;
        height: 5em;
    }

    5% {
        margin-top: -0.2em;
        height: 5.2em;
    }

    20% {
        margin-top: -0.1em;
        height: 5em;
    }

    35% {
        margin-top: 0.1em;
        height: 4.9em;
    }

    40% {
        margin-top: -0.1em;
        height: 5.1em;
    }

    60% {
        margin-top: 0.1em;
        height: 4.9em;
    }

    75% {
        margin-top: 0;
        height: 5em;
    }

    80% {
        margin-top: -0.4em;
        height: 5.2em;
    }

    100% {
        margin-top: 0.1em;
        height: 4.9em;
    }
}

Sie' wieder fertig!

Verwandte Empfehlungen:

Wie man reines CSS verwendet, um einen lächelnden und meditierenden kleinen Mönch zu implementieren

Wie man CSS und D3 verwendet, um Implementieren Sie die Animation des Zykloidenschwungeffekts

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS den LKW-Lader-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!