CSS3扁平化预加载动画效果

CSS3扁平化预加载动画效果

html:

<section class="container">
<span></span>
<span></span>
<span></span>
</section>

css:

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
/* 网格布局 */
display: grid;
justify-content: center;
align-content: center;
background-color: #fff;
}
.container{
position: relative;
}
.container span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform-origin: center center;
border: 6px solid #b71c1c;
border-radius: 50%;
}
/* 第1个圆，底边框设置透明 */
.container span:nth-child(1){
width: 100px;
height: 100px;
border-bottom: 6px solid transparent;
animation: animate-max 2s linear infinite;
}
/* 第2个圆，上边框设置透明 */
.container span:nth-child(2){
width: 60px;
height: 60px;
border-top: 6px solid transparent;
animation: animate 1s linear infinite;
}
/* 第3个圆，底边框设置透明 */
.container span:nth-child(3){
width: 20px;
height: 20px;
border-bottom: 6px solid transparent;
animation: animate 1s linear infinite;
}
@keyframes animate{
0%{
transform: translate(-50%,-50%) rotateZ(0deg);
}
100%{
transform: translate(-50%,-50%) rotateZ(360deg);
}
}
@keyframes animate-max{
0%{
transform: translate(-50%,-50%) rotateZ(0deg);
}
100%{
transform: translate(-50%,-50%) rotateZ(360deg);
}
}