css水波纹-雷达扩散效果：
代码解析：
第一个div是扩散出发点，不做动画处理；给后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;}}
