根本原因是单层 conic-gradient 缺乏真实雷达的起始加速、峰值亮度和衰减拖尾节奏，仅匀速旋转无法满足人眼对“脉冲感”的期待，且 safari 等浏览器易因帧率抖动导致边缘跳变。
为什么单层 conic-gradient 旋转看起来像“扫一下就停”
根本原因不是动画没跑完，而是人眼对“脉冲感”的期待没被满足：真实雷达有起始加速、峰值亮度、衰减拖尾，单层旋转只有匀速角度变化，缺乏节奏层次。浏览器渲染时也容易因帧率抖动让扇形边缘“跳变”，尤其在 Safari 上。
常见错误现象：animation: scan 4s linear infinite 写死后，扫描线从黑到亮再到黑的过程全挤在 360° 里，视觉上就是一根硬光条划过，没有“脉冲呼吸感”。
- 必须拆解为至少三层逻辑：底层固定环 + 中层主扫描臂（高亮）+ 上层衰减拖尾（半透明渐隐）
- 每层用独立伪元素（
::before/::after），避免共用 background 导致样式耦合 - 关键不是“加多层”，而是让它们的
animation-delay错开 —— 主臂先动，拖尾滞后 0.3s，再加一个微弱前置光晕提前 0.1s 触发，才形成自然脉冲
::before 和 ::after 的层级与 z-index 怎么配才不遮挡
伪元素默认无 z-index，但一旦设了 position: absolute，就会创建新层叠上下文；若父容器没设 position: relative，它们可能溢出或被兄弟元素盖住。
- 雷达容器必须加
position: relative，否则::before会相对于 body 定位，旋转中心偏移 - 主扫描臂（
::before）设z-index: 2，拖尾（::after）设z-index: 1，前置光晕用另一个::before（或额外伪元素）设z-index: 3，确保顺序可控 - 别依赖默认堆叠顺序 —— Chrome 和 Safari 对伪元素层叠解析略有差异，显式写死更稳
如何用 animation-delay 错开三层脉冲而不卡顿
错开延迟不是简单加 0.2s、0.4s 就行。如果三段动画 duration 不同，或 timing-function 不一致，很快会出现“拖影撕裂”或某层突然消失。
- 所有层统一用
animation-duration: var(--scan-speed, 5s)，变量定义在容器上，避免硬编码导致错位 - 主臂用
cubic-bezier(0.2, 0.6, 0.4, 1)（中段快，头尾利落），拖尾用ease-out（强调衰减），前置光晕用ease-in（强调突现）——但三者总时长必须严格一致 - 延迟值建议按比例设：
animation-delay: calc(var(--scan-speed) * -0.05)（前置光晕提前 5%）、0s（主臂同步启动）、calc(var(--scan-speed) * 0.1)（拖尾滞后 10%）
移动端 iOS Safari 渲染掉帧的关键避坑点
iOS 15.4+ 支持 conic-gradient，但配合多层伪元素 + 多个 animation-delay 时，GPU 合成层容易未触发，导致 CPU 软渲染，一开 3 个雷达就掉到 40fps。
- 必须给每层扫描元素加
transform: rotate(0deg) translateZ(0)，仅靠will-change: transform不够，Safari 需要明确的硬件加速提示 - 禁用
background-clip: text或filter: blur()在扫描层上 —— 这些会强制重绘，和conic-gradient叠加后性能雪崩 - 测试时打开 Safari 开发者工具 → “Timelines” 面板，重点看 “Rendering” 行：如果频繁出现黄色条（Rasterize），说明正在软渲染，得砍掉一层或换用
clip-path: circle()替代部分效果
实际最易被忽略的是：三层脉冲的 opacity 关键帧起点不能都从 0% 开始。前置光晕要在 -5% 帧就 opacity: 1，主臂在 0% 才开始渐显，拖尾在 10% 才达到峰值 —— 否则 iOS 下会看到“三道光同时炸开”，彻底失去脉冲感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
