怎么用純CSS實現(xiàn)類似脈動的loader

這篇文章將為大家詳細講解有關(guān)怎么用純CSS實現(xiàn)類似脈動的loader，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　代碼解讀

　　定義dom，容器中包含10個子元素：

　　<divclass="loader">

　　<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:linear-gradient(#eee70%,pink);

　　}

　　設(shè)置容器的樣式，是粉色背景并描邊的一個圓：

　　.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;

　　}

　　增加子元素的動畫效果：

　　.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è)置子元素下標，讓子元素依次播放動畫：

　　.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;}

　　增加容器動畫，加強脈動的效果：

　　.loader{

　　animation:loader-animate1.5sinfiniteease-in-out;

　　}

　　@keyframesloader-animate{

　　45%,55%{

　　transform:scale(1.05);

　　}

　　}

關(guān)于“怎么用純CSS實現(xiàn)類似脈動的loader”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。