css实现闪烁动画

html

<div class="box">
    <div class="blingbling"></div>
</div>

css

.box{
    width:30px;
    height:30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.blingbling{
    border: 1px solid #f67000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    animation: scaleout 1s infinite ease-in-out;
}
@keyframes scaleout {
    0% {
        transform: scale(1.0);
    } 
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}