核心是用conic-gradient配合rotate实现雷达扫描，而非单纯旋转扇形；需设from -90deg、窄角度断点（如270deg/273deg）、overflow:hidden及transform-origin:center确保精准锐利。
用做雷达扫描动画，核心不是“画个扇形再转”，而是利用渐变色断点控制可见区域，并配合实现动态扫描效果——否则容易出现边缘锯齿、旋转中心偏移或动画卡顿。
为什么不能直接用
然后加
？
这种写法看似直观，但实际会出问题：
的起始角默认是 0deg（指向正右），而雷达通常从正上方（-90deg 或 270deg）开始扫描，不调整会导致“扫描线”错位
颜色断点硬切（如
）在旋转时会产生明显色阶过渡，视觉上像“跳变”而非平滑扫描
若容器未设
或宽高不等，
会拉伸变形，扫描弧线变椭圆
直接对整个元素做
动画，可能带动子内容一起转，需用
并隔离层级
正确做法：用双层结构 + 精确断点 +
隐藏多余部分
推荐用一个圆形容器包裹扫描层，扫描层本身只负责“发光弧线”，不干扰内容：
关键点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
把起始方向调到正上方，符合雷达习惯
用
这种窄区间（3deg 宽）模拟扫描线粗细，比百分比更精准、无缩放失真
在父容器上，确保扫描线不会溢出圆外
动画作用于伪元素，不影响内部文字或图标
兼容性与性能注意点
在 Safari 14.1+、Chrome 85+、Firefox 83+ 支持良好，但旧版 iOS Safari 不支持。若需降级：
可 fallback 到
+ SVG
+
动画（更兼容但代码更重）
避免在
中使用太多色标（>6 个），某些低端安卓 WebView 会渲染异常或掉帧
动画用
和
属性，别触碰
或
，否则强制重排
如果扫描要响应数据（比如探测到目标时暂停），别用纯 CSS 动画，改用 JS 控制
或切换 class
真正难的不是写出第一版动效，而是让扫描线在不同缩放、暗色模式、高 DPR 屏幕下都保持锐利且同步——这时候断点角度必须用 deg 单位，不能混用 % 或 turn，且
必须显式写死为
，哪怕父容器是 flex 居中。
conic-gradienttransform: rotate()conic-gradient(0deg, red, red 10%, transparent 10%)animationconic-gradientred 10%border-radius: 50%conic-gradientrotate()transform-origin: centerbackground-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 -90deg270deg / 273degoverflow: hiddenconic-gradientradial-gradientstroke-dasharrayconic-gradienttransformopacitybackground-positionwidth/heightanimation-play-statetransform-origincenter