直接用多个.pulse元素叠加scale()和opacity动画是最易上手、兼容性最好的雷达脉冲方案；但它缺乏扫描方向感和真实拖尾效果，因脉冲模拟信号扩散衰减，需每个圆独立动画并用animation-delay错开起始时间形成水波式扩散。
直接用多个 .pulse 元素叠加 scale() 和 opacity 动画，是最易上手、兼容性最好的雷达脉冲方案；但它容易变成“同心圆叠罗汉”，缺乏扫描方向感和真实拖尾效果。
为什么单纯 rotate() 圆环不是雷达扫描
很多人第一反应是给一个圆环加 transform: rotate()，结果发现整圈跟着转——这叫旋转饼图，不是雷达。雷达的关键是：固定环 + 移动的“可见扇区”。脉冲动画则不同，它模拟的是信号从中心向外扩散再衰减的过程，scale() 从 0 到 1 正好对应这个物理行为。
- 错误现象：
rotate()作用在环形容器上，视觉上像老式电风扇，没有“发射-传播-消散”的时间差 - 正确思路：每个脉冲是一个独立圆形元素，从
scale(0)开始，放大到scale(1)同时opacity从 1 降到 0 - 性能影响：纯 CSS transform + opacity 动画触发 GPU 加速，60fps 稳定；但超过 8 个同时动画可能在低端安卓 WebView 中掉帧
如何控制多个圆圈依次脉冲
核心是用 animation-delay 错开起始时间，让它们像水波一样一层层往外推。别用 JS 控制，CSS 原生支持更轻量。
- 每个圆圈必须有相同尺寸、相同动画时长（比如
3s），否则节奏会乱 - 延迟值建议设为总时长的 1/3～1/2，例如：第一个
animation-delay: 0s，第二个1.2s，第三个2.4s - 不要用百分比延迟（如
33%），animation-delay只接受时间单位（s或ms） - 示例关键帧：
@keyframes pulse {<br> 0% { transform: scale(0); opacity: 0.8; }<br> 70% { transform: scale(0.95); opacity: 0.2; }<br> 100% { transform: scale(1); opacity: 0; }<br>}
常见坑：边缘模糊、动画卡顿、Safari 不动
看似简单，实操中三个细节最容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 50%必须写全，不能只靠宽高相等“碰巧”成圆——某些 Android 低版本渲染器会把 99.9px × 100px 当椭圆 - 父容器没设
overflow: hidden，放大过程中圆角会溢出，尤其在scale(1.05)阶段明显 - Safari 15.6 之前不支持
@keyframes中的transform: scale(0)起始态，需 fallback 写成scale(0.01)，否则动画不动 - 如果用伪元素（
::before/::after）生成圆圈，记得加content: ""且设display: block，否则 Safari 可能忽略渲染
真正难的不是让圆动起来，而是让它们动得“像在发射”——起始要锐利（scale 接近 0）、中间有速度感（缓动函数选 cubic-bezier(0.2, 0.8, 0.4, 1)）、收尾要干净（opacity 彻底归零，不留残影）。这些细节不调三次以上，根本看不出区别。
