怎么用純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è)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　代碼解讀

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

　　<divclass="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è)置線條樣式：

　　.flagspan{

　　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à)效果：

　　.flagspan{

　　animation:wave1.5sease-in-outinfinitealternate;

　　}

　　@keyframeswave{

　　to{

　　transform:translateX(2em);

　　}

　　}

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

　　.flagspan:nth-child(1){

　　--n:1;

　　}

　　.flagspan:nth-child(2){

　　--n:2;

　　}

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

　　/*中間代碼略&hellip;&hellip;*/

　　.flagspan:nth-child(14){

　　--n:14;

　　}

　　.flagspan:nth-child(15){

　　--n:15;

　　}

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

　　.flagspan{

　　animation-delay:calc(var(--n)*-0.1s);

　　}

　　最后，增加光影效果：

　　.flagspan{

　　background-color:ghostwhite;

　　}

　　@keyframeswave{

　　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ò)，請(qǐng)把它分享出去讓更多的人看到。