我很难在CSS中制作这个预加载器动画.
这就是我想要做的.
我究竟做错了什么？
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
@keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html,body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
@keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
解决方法
使用
step-end：
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
@keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
现在只需调整动画持续时间和延迟时间,使其更像OP.
更新：使用transform：scale()使圆圈从其中心扩展 – reference
