纯css实现加载动画代码

html部分

<div class="centered">
    <div class="blob-1"></div>
    <div class="blob-2"></div>
</div>

html,body{
    background:#000;
    margin:0;
}
.centered{
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#000;
    filter: blur(10px) contrast(20);
}
.blob-1,.blob-2{
    width:70px;
    height:70px;
    position:absolute;
    background:#fff;
    border-radius:50%;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
}
.blob-1{
    left:20%;
    animation:osc-l 2.5s ease infinite;
}
.blob-2{
    left:80%;
    animation:osc-r 2.5s ease infinite;
    background:#0ff;
}
@keyframes osc-l{
    0%{left:20%;}
    50%{left:50%;}
    100%{left:20%;}
}
@keyframes osc-r{
    0%{left:80%;}
    50%{left:50%;}
    100%{left:80%;}
}