SOURCE

console 命令行工具 X clear

                    
>
console
<div class="outside">
    <div class="inset">

    </div>
</div>
body{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.outside{
    height: 150px;
    width:150px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 0px #fff;
    animation: shadow 3s ease-in-out infinite;
    position: relative;
}

@keyframes shadow{
    0%{
        box-shadow: 0 0 10px 0px #fff;
    }
    50%{
        box-shadow: 0 0 30px 0px #fff;
    }

    100%{
        box-shadow: 0 0 10px 0px #fff;
    }
}


.inset{
    height: 100px;
    width: 100px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 25px;
    animation: inset-shadow 3s ease-in-out infinite;
    box-shadow:inset 0 0 10px 0px #fff;


}

@keyframes inset-shadow{
    0%{
        box-shadow:inset 0 0 10px 0px #fff;
    }
    50%{
        box-shadow:inset 0 0 30px 0px #fff;
    }

    100%{
        box-shadow:inset 0 0 10px 0px #fff;
    }
}