使用純CSS實(shí)現(xiàn)類(lèi)似于旗幟飄揚(yáng)動(dòng)畫(huà)效果的案例分析

這篇文章將為大家詳細(xì)講解有關(guān)使用純CSS實(shí)現(xiàn)類(lèi)似于旗幟飄揚(yáng)動(dòng)畫(huà)效果的案例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

效果預(yù)覽

源代碼下載

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

代碼解讀

定義 dom，容器中包含 15 個(gè)元素：

<div class="flag">
    <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>

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸：

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

設(shè)置線條樣式：

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

讓線條平鋪：

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

增加 3d 透視效果：

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

定義左右移動(dòng)的動(dòng)畫(huà)效果：

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

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

設(shè)置元素變量值：

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

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

/* 共 15 個(gè)元素，每元素的 --n 變量值等于它的序號(hào)。 */
/* 中間代碼略 …… */

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

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

讓各線條分別延時(shí)啟動(dòng)動(dòng)畫(huà)，形成旗幟飄揚(yáng)的效果：

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

最后，增加光影效果：

.flag span {
    background-color: ghostwhite;
}

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

關(guān)于使用純CSS實(shí)現(xiàn)類(lèi)似于旗幟飄揚(yáng)動(dòng)畫(huà)效果的案例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。