html内的代码:
<div class="loading"></div>
css代码:
.loading{
width: 300px;
height: 300px;
border:1px solid black;
position: relative;
}
.loading::before,.loading::after{
content: '';
position: absolute;
width: 0px;
height: 0px;
background: black;
border-radius: 50%;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto; /*上下左右都为0,再加上margin:auto; 就是自动居中*/
animation: s 1.5s linear infinite; /*加上s状态,状态开始到结束为1.5s*/
}
.loading::after{
animation-delay: 0.75s; /*第二个圆出现的时间*/
}
@keyframes s{
0%{ /*初始状态*/
width: 0px;
height: 0px;
opacity: 1; /*透明度*/
}
100%{ /*结束状态*/
width: 100px;
height: 100px;
opacity: 0;
}
}
最终效果预览:
点击预览效果链接(https://70kg111.github.io/loading-animation/index.html)