用多个div同心圆接力动画实现雷达脉冲效果：每圈独立scale+opacity动画，延迟错开，transform-origin设center，关键帧分0%、60%、100%三段并配cubic-bezier缓动，父容器relative定位，子元素absolute居中。
怎么用纯CSS实现雷达脉冲的扩散圈效果
核心思路是：用多个 div 圈层，各自独立做 scale + opacity 动画，起始时间错开，形成连续扩散感。不是靠一个圆渐变放大，而是“多层同心圆接力播放”。
为什么必须用多个元素而不是单个动画循环
单个元素反复缩放+淡出会卡顿、边缘发虚（尤其是 Safari），且无法模拟真实雷达那种“一圈刚淡出、下一圈已扩到半途”的叠加强度。多层方案能规避重绘抖动，也更容易控制每圈的持续时长和衰减曲线。
- 每圈动画时长建议设为
1.2s–1.6s，太短显得急促，太长失去脉冲感 - 至少用
3个圈，推荐4–5个：太少断层明显，太多增加渲染负担 - 所有圈的
transform-origin必须设为center，否则缩放中心偏移
CSS动画关键参数怎么配才不糊、不跳
重点在 @keyframes 的中间帧和缓动函数。不能只写 0% { scale: 0; opacity: 1 } → 100% { scale: 3; opacity: 0 }，那样会线性拉伸，边缘模糊且节奏生硬。
- 起始帧：
0% { transform: scale(0.1); opacity: 0.8; }（避免从 0 开始触发浏览器亚像素渲染） - 峰值帧（约
60%）：60% { transform: scale(1.8); opacity: 0.4; }（视觉最饱满处） - 结束帧：
100% { transform: scale(2.6); opacity: 0; }（留点余量，避免突然裁切） - 动画函数用
cubic-bezier(0.2, 0.8, 0.3, 1)，比ease-out更利落
实际部署时容易被忽略的坑
最常栽在定位和层级上——脉冲圈一动就飘走或被遮住，不是动画问题，是布局没锁死。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，所有圈用position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%) - 每个圈加
will-change: transform, opacity（仅对 Chrome/Edge 有效，但能稳帧率） - 别用
border-radius: 50%做圆——用width/height相等 +border-radius: 50%，否则缩放时 Safari 可能失圆 - 如果嵌在 SVG 里，得用
foreignObject包裹，直接塞div会失效
复杂点在于，每圈的动画延迟要随层数递增，但延迟值不能简单等差——第二圈延 0.3s、第三圈延 0.55s、第四圈延 0.75s 才自然。这个节奏得调，调不好就像打嗝。
