<template>
<div class="big">
    <div class="box">
</div>
</div>
</template>
<script>
export default {
name:'App'
}
</script>
<style scoped lang='scss'>
.big{
    height:100vh;
    width: 100vw;
    background-color:#000;
}
.box {
    border-radius: 50%;
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid #eee;
}
.box::after,.box::before {
    border-radius: 50%;
    /* 固定在div下 */
    z-index:-1;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    /* 撐開一點(diǎn)大小 */
    margin:-5%;
    box-shadow:inset 0px 0px 2px #fff;
    animation:clipMe 8s linear infinite;
}
.box::before {
    content:"";
}
.box::after {
    content:"";
    /* 提前運(yùn)動(dòng)4s */
  animation-delay:-4s;
}
@keyframes clipMe {
    0%,100% {
    clip:rect(0px,220.0px,2px,0px);
}
25% {
    clip:rect(0px,2px,220.0px,0px);
}
50% {
    clip:rect(218.0px,220.0px,220.0px,0px);
}
75% {
    clip:rect(0px,220.0px,220.0px,218.0px);
}
}
</style>

css.png