css水波纹-雷达扩散效果

css水波纹-雷达扩散效果：

代码解析：

1. 第一个div是扩散出发点，不做动画处理；
2. 给后3个div设置相同的动画：放大并变淡，各自设置延迟；
   3.设置动画属性 animation-timing-function: linear;，同时最后一个div延迟时间等于动画时间（animation-duration==animation-delay(最后一个div)），保持均匀变化；

html:

<div class="circleBox">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
</div>

css:

.circleBox {
    position: relative;
    width: 300px;
    height: 100px;
    margin: 10px auto;
}
/* 扩散动画 */
.circle, .circle1, .circle2, .circle3  {
    width: 10px;
    height: 10px;
    background: rgba(255,001,002,0.75);
    border: 1px solid rgba(255,001,002,0.85);
    border-radius: 999px;
    position: absolute;
    top: 50px;
    left: 15px;
}
.circle1, .circle2, .circle3  {
    /* animation: circleChange 2s 1s ease-out infinite; */
    animation-name: circleChange;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.circle1 {
    animation-delay: 1s;
}
.circle2 {
    animation-delay: 2s;
}
.circle3 {
    animation-delay: 3s;
}

@keyframes circleChange{
    0%{transform: scale(1);opacity: 0.95;}
    25%{transform: scale(2);opacity: 0.75;}
    50%{transform: scale(3);opacity: 0.5;}
    75%{transform: scale(4);opacity: 0.25;}
    100%{transform: scale(5);opacity: 0.05;}
}