如何使用纯CSS实现类似脉动的loader
导读：源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom，容器中包含10个子元素：...
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中包含10个子元素：
居中显示：
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);
}
}
大功告成！声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用纯CSS实现类似脉动的loader
本文地址： https://pptw.com/jishu/664481.html