建站
咨询
售后
建站咨询
这篇文章将为大家详细讲解有关怎么用纯CSS实现类似脉动的loader，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联建站专注于企业成都营销网站建设、网站重做改版、互助网站定制设计、自适应品牌网站建设、H5开发、成都做商城网站、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为互助等各大城市提供网站开发制作服务。
代码解读
定义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);
}
}
关于“怎么用纯CSS实现类似脉动的loader”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
当前标题：怎么用纯CSS实现类似脉动的loader
当前URL：http://sczitong.cn/article/jeccpd.html
