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;
}
}