核心是用conic-gradient配合rotate实现雷达扫描，而非单纯旋转扇形；需设from -90deg、窄角度断点（如270deg/273deg）、overflow:hidden及transform-origin:center确保精准锐利。
用 conic-gradient 做雷达扫描动画，核心不是“画个扇形再转”，而是利用渐变色断点控制可见区域，并配合 transform: rotate() 实现动态扫描效果——否则容易出现边缘锯齿、旋转中心偏移或动画卡顿。
为什么不能直接用 conic-gradient(0deg, red, red 10%, transparent 10%) 然后加 animation？
这种写法看似直观，但实际会出问题：
-
conic-gradient的起始角默认是 0deg（指向正右），而雷达通常从正上方（-90deg 或 270deg）开始扫描，不调整会导致“扫描线”错位 - 颜色断点硬切（如
red 10%）在旋转时会产生明显色阶过渡，视觉上像“跳变”而非平滑扫描 - 若容器未设
border-radius: 50%或宽高不等，conic-gradient会拉伸变形，扫描弧线变椭圆 - 直接对整个元素做
rotate()动画，可能带动子内容一起转，需用transform-origin: center并隔离层级
正确做法：用双层结构 + 精确断点 + background-clip 隐藏多余部分
推荐用一个圆形容器包裹扫描层，扫描层本身只负责“发光弧线”，不干扰内容：
.radar {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.radar::before {
content: "";
position: absolute;
inset: 0;
background: conic-gradient(
from -90deg,
transparent 0deg,
transparent 270deg,
#0af 270deg,
#0af 273deg,
transparent 273deg
);
animation: scan 4s linear infinite;
}
@keyframes scan {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
关键点：
-
from -90deg把起始方向调到正上方，符合雷达习惯 - 用
270deg / 273deg这种窄区间（3deg 宽）模拟扫描线粗细，比百分比更精准、无缩放失真 -
overflow: hidden在父容器上，确保扫描线不会溢出圆外 - 动画作用于伪元素，不影响内部文字或图标
兼容性与性能注意点
conic-gradient 在 Safari 14.1+、Chrome 85+、Firefox 83+ 支持良好，但旧版 iOS Safari 不支持。若需降级：
- 可 fallback 到
radial-gradient+ SVGstroke-dasharray动画（更兼容但代码更重） - 避免在
conic-gradient中使用太多色标（>6 个），某些低端安卓 WebView 会渲染异常或掉帧 - 动画用
transform和opacity属性，别触碰background-position或width/height，否则强制重排 - 如果扫描要响应数据（比如探测到目标时暂停），别用纯 CSS 动画，改用 JS 控制
animation-play-state或切换 class
真正难的不是写出第一版动效，而是让扫描线在不同缩放、暗色模式、高 DPR 屏幕下都保持锐利且同步——这时候断点角度必须用 deg 单位，不能混用 % 或 turn，且 transform-origin 必须显式写死为 center，哪怕父容器是 flex 居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
