怎么用纯CSS实现类似脉动的loader

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(#eee70%,pink);

}

设置容器的样式，是粉色背景并描边的一个圆：

.loader{

width:6em;

height:6em;

padding:3em;

font-size:10px;

background-color:pink;

border-radius:50%;

border:0.8emsolidhotpink;

}

设置子元素的布局方式为横向平铺：

.loader{

display:flex;

align-items:center;

justify-content:space-between;

}

设置子元素的样式：

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

}

}

设置子元素下标，让子元素依次播放动画：

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

}

}

关于“怎么用纯CSS实现类似脉动的loader”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享文章：怎么用纯CSS实现类似脉动的loader
转载来源：http://kswjz.com/article/jeccpd.html