console
<div>
<i class="i1"></i>
</div>
div {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.i1 {
display: block;
border-radius: 50%;
background: #fff;
animation: dian 1.3s ease-out infinite;
}
div::after{
position: absolute;
content: '';
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100;
}
@keyframes dian {
0% {
width: 1px;
height: 1px;
opacity: 0.9;
}
100% {
width: 30px;
height: 30px;
opacity: 0;
}
}