雷达扫描动效转不起来的根本原因是仅旋转容器而背景渐变未同步变化；需用conic-gradient或同步动画background-position与rotate，且opacity须与rotate绑定于同一keyframes中。
radar 扫描动效为什么转不起来？background-position 没跟上旋转
常见现象是扇形“扫”了一下就停住，或者干脆不动——根本原因不是旋转没生效，而是 background-image 用的线性渐变本身没方向变化，光靠 transform: rotate() 转容器，渐变纹路并不会跟着“流动”。必须让背景定位点持续偏移，配合旋转产生扫描错觉。
实操建议：
- 用
background: conic-gradient()替代线性渐变，它原生支持角度变化，background-position对它无效，但background-size和background-origin需对齐中心 - 如果坚持用
linear-gradient，得同时动画background-position（如0% 50%, 100% 50%）和transform: rotate()，且两者时长、缓动要严格同步，否则撕裂 - 别把
rotate()加在伪元素上再叠在内容上——层叠顺序和z-index容易导致扫描层被遮挡，直接作用于雷达底图容器更稳
淡入淡出怎么和旋转节奏对齐？@keyframes 里别只写 opacity
单独给扫描臂加 opacity: 0 → 1 → 0 动画，常出现“闪一下就消失”，因为透明度变化和旋转角度没绑定。视觉上扫描是“从中心划出、扫过、淡出”，不是“先亮再转”。
实操建议：
- 把
opacity和transform: rotate()写进同一个@keyframes，例如：0% 时rotate(0deg) opacity(0)，50% 时rotate(180deg) opacity(1)，100% 时rotate(360deg) opacity(0) - 避免用
ease-in-out做全程缓动——起始和结束的慢速会让淡入/淡出拖沓，改用cubic-bezier(0.2, 0.6, 0.4, 1)让中间段更快，头尾收得利落 - 如果雷达有固定刻度线，扫描臂的
opacity动画起点必须略晚于旋转起点（比如 5% 开始渐显），否则会看到“黑臂突现”
CSS 变量控制扫描速度时，animation-duration 不能硬编码
用户想调快慢，结果改了 --scan-speed: 8s，但动效还是 4 秒一圈——因为 animation-duration 写死成 4s，CSS 变量没接进去。
实操建议：
- 必须用
animation-duration: var(--scan-speed, 6s)，且变量定义在动效作用的选择器上（比如.radar-scan元素），不能只在:root声明就以为全局生效 - 如果扫描臂用了
conic-gradient+background-size模拟长度，改速度时background-size一般不用联动；但若用clip-path截取扇形，clip-path的角度计算就得随速度重算，否则边缘会抖 - 移动端要注意：iOS Safari 对
conic-gradient+animation组合的渲染性能敏感，animation-timing-function别用太复杂的贝塞尔曲线，否则掉帧明显
IE 或旧版 Edge 下雷达完全不显示？conic-gradient 缺失兜底
直接写 background: conic-gradient(...)，老浏览器会整个背景失效，变成透明或默认色，雷达图就空了。
实操建议：
- 必须提供线性渐变兜底：
background: linear-gradient(90deg, transparent, #0ff, transparent); background: conic-gradient(from 0deg, transparent, #0ff, transparent);——第二行会覆盖第一行，老浏览器忽略第二行，仍用第一行 - 别依赖
@supports (background: conic-gradient())做条件加载，有些旧 Chrome 也能识别但渲染异常，稳妥做法是 JS 检测后动态加类，CSS 里用.radar-has-conic类区分样式 - 如果项目强制兼容 IE11，放弃 CSS 方案，改用
<canvas></canvas>绘制扫描线，CSS 只负责底图，否则动效卡顿不可控
最麻烦的其实是扫描臂和刻度线的层级关系：稍不注意，transform-origin 偏一点，或者 border-radius 在父容器上漏设，扫描弧线就会切掉一角。这种问题没法靠查文档解决，得打开 DevTools 一帧一帧拖时间轴看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
