這篇文章將為大家詳細(xì)講解有關(guān)怎么用純CSS實(shí)現(xiàn)類似脈動(dòng)的loader，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)建站專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、互助網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為互助等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
代碼解讀
定義dom，容器中包含10個(gè)子元素：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(#eee70%,pink);
}
設(shè)置容器的樣式，是粉色背景并描邊的一個(gè)圓：
.loader{
width:6em;
height:6em;
padding:3em;
font-size:10px;
background-color:pink;
border-radius:50%;
border:0.8emsolidhotpink;
}
設(shè)置子元素的布局方式為橫向平鋪：
.loader{
display:flex;
align-items:center;
justify-content:space-between;
}
設(shè)置子元素的樣式：
.loader>span{
width:0.5em;
height:50%;
background-color:deeppink;
}
增加子元素的動(dòng)畫效果：
.loader>span{
transform:scaleY(0.05)translateX(-0.5em);
animation:span-animate1.5sinfiniteease-in-out;
}
@keyframesspan-animate{
0%,100%{
transform:scaleY(0.05)translateX(-0.5em);
}
15%{
transform:scaleY(1.2)translateX(1em);
}
90%,100%{
background-color:hotpink;
}
}
設(shè)置子元素下標(biāo)，讓子元素依次播放動(dòng)畫：
.loader>span{
animation-delay:calc(var(--n)*0.05s);
}
.loader>span:nth-child(1){--n:1;}
.loader>span:nth-child(2){--n:2;}
.loader>span:nth-child(3){--n:3;}
.loader>span:nth-child(4){--n:4;}
.loader>span:nth-child(5){--n:5;}
.loader>span:nth-child(6){--n:6;}
.loader>span:nth-child(7){--n:7;}
.loader>span:nth-child(8){--n:8;}
.loader>span:nth-child(9){--n:9;}
.loader>span:nth-child(10){--n:10;}
增加容器動(dòng)畫，加強(qiáng)脈動(dòng)的效果：
.loader{
animation:loader-animate1.5sinfiniteease-in-out;
}
@keyframesloader-animate{
45%,55%{
transform:scale(1.05);
}
}
關(guān)于“怎么用純CSS實(shí)現(xiàn)類似脈動(dòng)的loader”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
