So erzielen Sie mit reinem CSS einen fahnenschwenkenden Animationseffekt (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um einen Flaggen-Animationseffekt zu erzielen (Quellcode ist beigefügt). Ich hoffe, dass dies der Fall ist hilfreich sein.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

Dom definieren, der Container enthält 15 Elemente:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <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-color: black;
}

Containergröße definieren:

.flag {
    width: 10em;
    height: 15em;
    font-size: 20px;
}

Linienstil festlegen:

.flag span {
    width: 0.25em;
    height: inherit;
    background-color: deepskyblue;
}

Linie kacheln lassen:

.flag {
    display: flex;
    justify-content: space-between;
}

3D-Perspektiveffekt hinzufügen:

.flag {
    transform: perspective(500px) rotateY(-20deg);
}

Animationseffekt der Links- und Rechtsbewegung definieren :

.flag span {
    animation: wave 1.5s ease-in-out infinite alternate;
}

@keyframes wave {
    to {
        transform: translateX(2em);
    }
}

Legen Sie den Wert der Elementvariablen fest:

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

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

/* 共 15 个元素，每元素的 --n 变量值等于它的序号。 */
/* 中间代码略 …… */

.flag span:nth-child(14) {
    --n: 14;
}

.flag span:nth-child(15) {
    --n: 15;
}

Lassen Sie jede Zeile die Animation mit einer Verzögerung starten, um den Effekt einer wehenden Flagge zu erzeugen:

.flag span {
    animation-delay: calc(var(--n) * -0.1s);
}

Fügen Sie schließlich hinzu Licht- und Schatteneffekt:

.flag span {
    background-color: ghostwhite;
}

@keyframes wave {
    to {
        transform: translateX(2em);
        background-color: deepskyblue;
    }
}

Du bist 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 CSS und D3, um eine interaktive Animation kleiner schwimmender Fische zu realisieren (mit Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS einen fahnenschwenkenden Animationseffekt (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!