真正靠谱的雷达扫描动画是固定圆环，用旋转的半透明扇形或遮罩模拟扫描线；推荐SVG+@keyframes或纯CSS conic-gradient+clip-path方案，注意性能优化与兼容性处理。
用 @keyframes 实现雷达扫描的圆环轮廓
雷达扫描动画的核心不是“旋转整个圆”，而是模拟扫描线从中心向外扫过环形区域的效果。直接旋转一个带描边的 circle 或 ring 元素，看起来像转盘，不是雷达。真正靠谱的做法是：固定圆环，用一个半透明扇形（或遮罩）配合旋转动画，露出下方的环。
常见错误现象：transform: rotate() 作用在圆环本身上，结果是整圈一起转，没有“扫描感”；或者用两个重叠 div 拼角度，但边缘锯齿、响应式下错位。
- 推荐用 SVG +
@keyframes：画一个circle作为底环，再叠加一个radialGradient或conic-gradient配合clip-path控制可见扇区 - 更轻量的纯 CSS 方案：用伪元素
::before做扫描线，背景设为conic-gradient(from 0deg, #fff 0deg, #fff 1deg, transparent 1deg)，再rotate它 - 注意
conic-gradient在 Safari 旧版本不支持，iOS 15.4 之前需加-webkit-conic-gradient
clip-path 配合 rotate 制作动态扫描扇区
这是最可控的方式：用 clip-path: polygon() 或 inset() 不够灵活，得换 clip-path: path() 或更稳的 clip-path: circle() + 旋转容器。但实际中，path() 动画性能差，所以主流做法是把扫描扇形做成独立元素，旋转它，同时用 clip-path: inset(0) 或透明遮罩盖住不需要显示的部分。
使用场景：需要精确控制扫描角度（比如只扫 270°）、暂停/反向/变速扫描时。
立即学习“前端免费学习笔记（深入）”；
- 不要用
clip-path: polygon(...)动态计算顶点——CSS 无法变量插值，每次改角度都得 JS 注入新样式 - 用
transform-origin: center确保旋转锚点在圆心，否则扫描线会漂移 - 如果圆环有
stroke-dasharray虚线效果，扫描动画要和虚线节奏对齐，否则出现“断续闪烁”
性能关键：避免 layout 触发和过度绘制
雷达动画常被塞进仪表盘页，一开就是 5–6 个并行扫描，卡顿多来自隐式合成层缺失或频繁重排。
常见错误现象：扫描线用 box-shadow 模拟光效、或用多层 div 叠加渐变，导致每帧触发 paint 和 composite，FPS 掉到 30 以下。
- 强制开启硬件加速：
transform: rotate(0deg) translateZ(0)，但别滥用——仅对扫描线元素加，底环不用 - 扫描线元素设
will-change: transform，但只在动画开始前加，结束立即移除（JS 控制），否则内存泄漏 - 避免用
background-image: radial-gradient做发光晕，改用filter: blur(2px)+ 半透明，更省 GPU
响应式下圆环变形？用 viewBox 和 preserveAspectRatio
纯 CSS 圆环在缩放时容易压扁，尤其嵌在 flex/grid 容器里。SVG 是唯一能保证等比缩放又不失真的方案。
使用场景：大屏监控系统、移动端适配、或需要打印导出 SVG 的场合。
- 必须写
viewBox="0 0 200 200"并设preserveAspectRatio="xMidYMid meet"，否则缩放时圆变椭圆 - 不要给 SVG 设固定
width/height，用max-width: 100%+height: auto - 扫描线动画若用
<animateTransform>，注意 IE 已全弃用，必须 fallback 到 CSS@keyframes
transform 是否隔离图层，每个 clip-path 是否被浏览器降级成软件渲染。 
