SOURCE

console 命令行工具 X clear

                    
>
console
<div>
    <i class="i1"></i>
</div>
div {
    width: 50px;
    height: 50px;
    /* background: #000; */
    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;
    }
}