So animieren Sie ein rotierendes Fahrradrad mit reinem CSS

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt eines rotierenden Fahrradrads zu realisieren. Ich hoffe, dass er hilfreich ist du hilfst.

Effektvorschau

Quellcode-Download

https://github.com/comehope/front-end-daily -challenges

Code-Interpretation

Definieren Sie Dom, der Container enthält 6 Elemente:

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

Zentrierte Anzeige:

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

Zeichnen Sie den Radkreis:

.wheel {
    width: 9em;
    height: 9em;
    font-size: 25px;
    border: 0.4em solid #777;
    border-radius: 50%;
    box-shadow: 0 0 0 0.5em #111;
}

Definieren Sie den Stil der Speichen:

.wheel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel span {
    position: absolute;
    width: 8em;
    height: 1em;
    border: 0.1em solid;
    border-color: #ccc transparent;
}

Definieren Sie Variablen und zeichnen Sie mehrere Speichen:

.wheel span {
    transform: rotate(calc((var(--n) - 1) * 30deg));
}

.wheel span:nth-child(1) {
    --n: 1;
}

.wheel span:nth-child(2) {
    --n: 2;
}

.wheel span:nth-child(3) {
    --n: 3;
}

.wheel span:nth-child(4) {
    --n: 4;
}

.wheel span:nth-child(5) {
    --n: 5;
}

.wheel span:nth-child(6) {
    --n: 6;
}

Lassen Sie das Rad drehen:

.wheel span {
    animation: run 4s linear infinite;
}

@keyframes run {
    to {
        transform: rotate(calc((var(--n) - 1) * 30deg + 360deg));
    }
}

Zeichnen Sie mit Pseudoelementen. Zeichnen Sie die Linien auf dem Boden:

.wheel {
    position: relative;
}

.wheel::before {
    content: '';
    position: absolute;
    width: 15em;
    height: 0.2em;
    top: 11em;
    background-image: linear-gradient(
            to right,
            silver 0, silver 4em,
            transparent 4em, transparent 5em,
            silver 5em, silver 10em,
            transparent 10em, transparent 12em,
            silver 12em, silver 14em,
            transparent 14em, transparent 15em
        );
}

Zum Schluss bewegen Sie die Linien auf dem Boden, um den Effekt zu erzeugen, als würden sich Räder vorwärts bewegen:

.wheel::before {
    background-position: 15em;
    animation: run2 6s linear infinite;
}
@keyframes run2 {
    to {
        background-position: -15em;
    }
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Button-Hover-Effekt zu erzielen, bei dem sich der Ball in einen rechteckigen Hintergrund verwandelt (Quellcode im Anhang)

So verwenden Sie reines CSS, um einen Papierkranich zu implementieren (mit Quellcode)

So verwenden Sie CSS und D3, um eine interaktive Animation kleiner schwimmender Fische zu implementieren (mit Code)

Das obige ist der detaillierte Inhalt vonSo animieren Sie ein rotierendes Fahrradrad mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!