圆圈发散 css

<div class="hqj-earth">
   <div class="hqj-pic">
       <img src="//cdn.myxypt.com/8a47aa04/23/12/46a8a8a7fa1be1831a2d22f35ee92fc650bb94b3.png" width="540" height="540" alt="">
   </div>
</div>

.hqj-earth{width:76.4vh;height:76.4vh;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.hqj-pic{width:51.57vh;height:51.57vh;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hqj-pic:after{width:100%;height:100%;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px rgba(212,42,42,.3) solid;animation:cirs 6s linear infinite;opacity:0}
.hqj-pic:before{width:100%;height:100%;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px rgba(212,42,42,.3) solid;animation:cirs 6s linear 3s infinite;opacity:0}
.hqj-pic img{width:100%;height:100%;border-radius:50%}

@keyframes cirs{
  0%{opacity:1;width:100%;height:100%}
  100%{opacity:0;width:300%;height:300%}
}