用 conic-gradient 可纯 css 实现赛博朋克雷达扫描背景：通过多层渐变（荧光色环、同心网格、旋转光束）叠加，配合 --angle 自定义属性动画、透明度控制、blur 残影及噪点纹理，达成动态扫描+霓虹残影效果。
用 conic-gradient 实现赛博朋克风格的雷达扫描背景，核心是模拟旋转光束 + 荧光色环 + 扫描线残影。它不需要 JS 动画，纯 CSS 就能做出动态扫描效果，关键在颜色停靠点、透明度控制和动画 timing。
基础雷达环：用 conic-gradient 构建发光色环
赛博朋克雷达底环强调高对比、霓虹蓝/紫/粉+黑底。避免实心填充，改用带透明度的渐变色环来模拟“能量环”：
示例代码：background: conic-gradient( from 0deg, transparent 0%, transparent 70%, #00f3ff 72%, #ff00c8 75%, #00f3ff 78%, transparent 80% );
说明：只在 72%–80% 区间绘制窄色带（模拟亮环），其余为透明，配合深色背景就能突出荧光感。可叠加多层 conic-gradient（用逗号分隔）实现双环或外晕效果。
动态扫描线：旋转 + 锥形光束 + 残影
真正的“扫描感”来自一条从中心射出的窄角度光束，并持续旋转。用 conic-gradient 模拟光束时，把绝大多数角度设为透明，只留 1°–3° 的亮扇区：
- 光束颜色选高饱和青/品红（如
#00f3ff或#ff00c8），带轻微透明度（rgba(0,243,255,0.7)）增强穿透感 - 用
@keyframes让background的conic-gradient旋转：动画属性写background，不是transform，否则会触发重绘且不精准 - 添加
animation-timing-function: linear确保匀速旋转，更像真实雷达
增强赛博感的关键细节
单靠旋转不够“赛博”，需叠加视觉层次：
-
中心脉冲点：在伪元素
::before上加一个radial-gradient白点，配合缩放动画模拟心跳式闪烁 -
扫描余晖：给光束层加
filter: blur(1px)，再配合opacity动画，在光束扫过位置留下短暂淡出残影 -
网格底图：用
repeating-conic-gradient或radial-gradient叠加同心圆+十字线，颜色用暗灰（#111）+ 微弱荧光（rgba(0,243,255,0.08)）避免抢戏 -
噪点纹理：用
background-blend-mode: overlay叠加一层url("data:image/svg+xml,...")生成的随机噪点 SVG，提升胶片故障感
完整可运行结构示意
HTML 只需一个容器；CSS 中分三层（底环、网格、扫描光束），每层独立动画，用 z-index 或层叠上下文控制顺序：
.radar-bg {
background:
/* 第三层：扫描光束（最上）*/
conic-gradient(from var(--angle),
transparent 0%,
rgba(0,243,255,0.6) 0.5%,
transparent 1.5%),
/* 第二层：同心网格 */
radial-gradient(circle at center,
transparent 49%,
rgba(0,243,255,0.05) 50%,
transparent 51%),
/* 第一层：主光环 */
conic-gradient(from 0deg,
transparent 0%,
transparent 75%,
#00f3ff 76%,
#ff00c8 78%,
#00f3ff 80%,
transparent 82%);
animation: scan 8s linear infinite;
}
<p>@keyframes scan {
to { --angle: 360deg; }
}</p>
注意：--angle 是 CSS 自定义属性，必须在 :root 或元素内声明初始值（如 --angle: 0deg;），才能被 conic-gradient 读取。
