雷达扫描必须用conic-gradient配合rotate实现固定背景+移动扇区，而非单纯rotate圆环；波纹需多层独立pulse元素错时动画，且扫描与脉冲层必须分离、统一transform-origin并注意safari和安卓兼容性。
雷达扫描必须用 conic-gradient + rotate，不能只靠 transform: rotate()
单纯给一个圆环加 transform: rotate()，结果是整块元素原地打转，视觉上像电风扇——这叫“旋转饼图”，不是雷达。雷达的核心是固定背景 + 移动的可见扇区。正确做法是用 conic-gradient 生成一条窄角度光带（比如 conic-gradient(from -90deg, #0af 270deg, #0af 273deg, transparent 273deg)），再配合 transform: rotate() 让这条光带绕中心扫过。
常见错误包括：
- 没设
transform-origin: center，导致旋转中心偏移 - 容器没加
border-radius: 50%或宽高不等，conic-gradient拉伸成椭圆 - 断点写成硬切（如
red 10%），旋转时出现跳变而非平滑过渡 - 直接对含文字或子元素的容器加动画，内容跟着一起转
波纹扩散要用多个独立 .pulse 元素 + animation-delay
单个圆做 scale(0) → scale(1) + opacity: 1 → 0 只能模拟一次脉冲；真实雷达需要水波式层层外推的效果，必须用多个圆形 DOM 节点（或伪元素）叠加，每个节点动画总时长一致，但起始时间错开。
实操要点：
- 每个
.pulse设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); - 统一动画时长（如
animation: pulse 2s ease-out forwards），再用animation-delay: 0s, 0.4s, 0.8s错开 - 别用百分比延迟（如
delay: 20%），浏览器不支持，必须是具体时间值 - 超过 6 层易在低端安卓 WebView 掉帧，可用
@media (prefers-reduced-motion: reduce)降级为单层淡入
两层必须隔离：雷达扫描层和波纹层不能共用同一个 DOM 节点
把扫描线和脉冲圆画在同一个 div 上，会导致样式冲突、定位打架、动画节奏互相干扰。扫描需要持续匀速旋转，脉冲需要逐层触发缩放，二者生命周期、触发逻辑、性能敏感点完全不同。
推荐结构：
-
.radar（容器）：position: relative; width/height: 200px; border-radius: 50% -
.scan-line（扫描层）：绝对定位，background: conic-gradient(...)，仅跑rotate动画 -
.pulse（脉冲层）：多个兄弟节点或伪元素，各自控制scale和opacity，不参与旋转 - 所有层统一设
transform-origin: center，避免中心漂移
移动端和 Safari 的几个关键避坑点
Safari 对负百分比 transform-origin（如 -50% -50%）解析不稳定；部分安卓 WebView 在多层动画叠加时 GPU 渲染异常；这些不是边缘问题，而是上线后高频报错点。
稳妥写法：
- 锚点用
transform-origin: calc(50% + 1px) calc(50% + 1px)，不用负百分比 - 扫描层加
will-change: transform提前提示渲染引擎，但别滥用（仅限真正动画的元素） - 脉冲层用
opacity+transform: scale()，确保触发 GPU 加速，禁用left/top动画 - 所有动画都加
forwards，避免最后一帧回弹
最易被忽略的是：扫描和脉冲的动画时长虽可不同，但它们的循环起点必须对齐——否则过几秒就会出现“光带扫到一半，脉冲才刚出发”的脱节感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
