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

成都創(chuàng)新互聯(lián)成立于2013年，我們提供高端網(wǎng)站建設(shè)、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)公司、網(wǎng)站定制、成都全網(wǎng)營銷推廣、小程序設(shè)計(jì)、微信公眾號(hào)開發(fā)、seo優(yōu)化排名服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為VR全景企業(yè)提供源源不斷的流量和訂單咨詢。

代碼解讀

定義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)畫效果：

.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)畫，形成旗幟飄揚(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)類似于旗幟飄揚(yáng)動(dòng)畫效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)頁標(biāo)題：怎么用純CSS實(shí)現(xiàn)類似于旗幟飄揚(yáng)動(dòng)畫效果
網(wǎng)頁URL：http://chinadenli.net/article18/ihpjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、外貿(mào)建站、建站公司、網(wǎng)站策劃、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)