圆锥渐变 conic-gradient 在雷达扫描动画中为什么比线性/径向更合适
因为雷达扫描是围绕中心点按角度扫过一圈，视觉上是“扇形展开”，而 conic-gradient 的色标就是按角度（0deg → 360deg）顺时针分布的，天然匹配扫描弧线。用 radial-gradient 模拟会需要多层遮罩+旋转，linear-gradient 更得靠 transform + clip-path 折腾，性能差、控制难。
常见错误现象：conic-gradient 在 Safari 15.4 之前不支持，且部分安卓 WebView（如 Android 10 系统 WebView）也缺失；直接写 background: conic-gradient(...) 而不加 background-size 和 background-position，会导致渐变默认铺满整个容器，看不出“单条扫描线”效果。
- 只用一层
conic-gradient，把 95%～100% 区间设为透明，其余设为实色，就能得到一条窄扫描弧 - 必须配合
background-size: 200% 200%（或更大）才能让渐变足够“细”，否则弧太粗 - 加上
background-position: center确保旋转锚点在正中 - 记得加
animation: spin 3s linear infinite，且@keyframes spin中只动background-position或transform: rotate()—— 推荐后者，兼容性略好
transform: rotate() vs background-position 控制扫描转动的区别
两者都能动起来，但行为不同：用 transform: rotate() 是整块背景图跟着转，简单直接；用 background-position 移动的是渐变“起始角”，本质是重绘渐变坐标系，某些旧版浏览器（如 iOS 14 Safari）对它的动画支持不稳定，容易卡顿或跳帧。
使用场景：如果目标环境明确支持现代 CSS（Chrome 85+/Edge 85+/Firefox 72+），两个都行；若需兼顾微信内置浏览器（X5 内核）、钉钉等混合容器，优先选 transform: rotate()。
立即学习“前端免费学习笔记（深入）”；
-
transform方案：动画属性写transform: rotate(0deg)→rotate(360deg)，无需改 background 相关属性 -
background-position方案：需配background-size: 400% 400%才能靠位移模拟旋转感，参数难调，且动画曲线易出现非匀速感 - 性能影响：
transform触发 GPU 加速更稳定；background-position动画在低端机上可能触发重绘（paint），掉帧明显
如何让扫描线有“亮头+渐隐尾”的真实雷达感
纯单色 conic-gradient(red, red 10%, transparent 10%, transparent) 看起来像硬边光束，不像真实雷达那种前亮后淡的效果。关键在于用多色停点做亮度衰减，而不是靠 opacity。
参数差异：conic-gradient 允许同一角度指定多个颜色，比如 red 0deg, #ff9999 5deg, #ffcccc 10deg, transparent 10deg —— 这样前段有明暗过渡，后段立刻截断，形成“拖尾即止”的扫描感。
- 不要用
rgba(255,0,0,0.3)去模拟淡出，透明通道在渐变中会叠加混色，导致灰蒙蒙 - 推荐写法：
conic-gradient(#00f 0deg, #33a 3deg, #66c 6deg, transparent 6deg)，三段蓝调递进再截断 - 扫描线宽度建议控制在 3–8deg 之间，太宽失真，太窄不易看清
- 若要加“中心亮点”，可额外叠一层
::before圆形伪元素，box-shadow: 0 0 12px #00f8
兼容性兜底：当 conic-gradient 不可用时怎么降级
不能只靠 @supports (background: conic-gradient()) 包裹——有些浏览器（如旧版 Edge）虽识别语法但渲染异常。稳妥做法是用 JS 检测支持性，并切换 class；或者纯 CSS 降级为旋转的 SVG mask，但更轻量的是用 radial-gradient + clip-path 模拟近似效果。
容易踩的坑：直接删掉整个动画当静态图，用户会误以为加载卡死；或者 fallback 到 border: 4px solid #00f + border-top-color: transparent 的旋转圆圈，这已经不是雷达效果了，而是普通 spinner。
- CSS 降级方案：
background: radial-gradient(circle at 50% 50%, #00f 0%, #00f 2px, transparent 2px)+clip-path: polygon(50% 50%, 100% 50%, 100% 0%, 0% 0%, 0% 50%)，再旋转这个 clipped 区域 - JS 检测片段：
const supportsConic = CSS.supports('background', 'conic-gradient(red, blue)')，返回 false 就加 classno-conic - 别忘了给降级方案加
animation-timing-function: steps(12)模拟“分段扫描”感，比平滑旋转更接近雷达
conic-gradient 兼容，不如直接上 canvas 帧动画来得稳。 
