纯CSS雷达波纹效果通过径向渐变与关键帧动画实现：用伪元素绘制透明中心+半透明环+透明外圈，配合scale或宽高扩张及opacity衰减，叠加多层错延迟动画模拟真实扩散。
用 CSS 关键帧动画配合径向渐变（radial-gradient）就能实现雷达波纹一圈圈向外扩散的效果，核心是让一个透明圆环从中心点匀速扩张、同时逐渐变淡消失。
1. 基础结构：用伪元素或空 div 承载波纹
推荐用一个 div 作为波纹容器，再通过 ::after 伪元素绘制单个波纹。这样方便复用多个波纹层，也利于控制层级和动画延迟。
示例 HTML：
<div class="radar-wave"></div>2. 样式关键：径向渐变 + 百分比尺寸 + 动画缩放
不依赖 SVG 或 JS，纯 CSS 实现的关键在于：
– 用 radial-gradient 绘制「透明中心 + 半透明环 + 完全透明外圈」；
– 将伪元素初始设为 width: 0; height: 0;，再通过 transform: scale() 或直接改 width/height 让它从 0 扩张到足够大；
– 配合 opacity 从 1 降到 0，模拟波纹衰减。
CSS 示例：
.radar-wave {position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.radar-wave::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(
circle at center,
transparent 0%,
rgba(0, 150, 255, 0.6) 30%,
transparent 70%
);
animation: ripple 2s ease-out infinite;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 400px;
height: 400px;
opacity: 0;
}
}
3. 多层波纹：叠加多个伪元素并错开动画时序
真实雷达效果需要 2~3 圈波纹依次扩散。可以：
- 用
::after和::before各做一个波纹，或额外加子元素 - 给第二圈加
animation-delay: 0.6s，第三圈加1.2s - 每圈的
width/height终值可略不同，避免完全重叠 - 颜色透明度或渐变范围微调，增强层次感
4. 兼容性与优化提示
该方案在现代 H5 浏览器（Chrome、Safari、Firefox、iOS/Android WebView）中兼容良好。注意：
- 避免用
box-shadow模拟波纹——性能差且边缘锯齿明显 - 若需适配老版 Android（如 UC 内核），可降级为
transform: scale()+ 固定宽高，更稳定 - 动画时长建议 1.5–2.5 秒，太快显得急促，太慢失去雷达节奏感
- 可结合
will-change: transform, opacity提升动画流畅度
不复杂但容易忽略的是：波纹的“环”本质不是实心圆，而是靠径向渐变的色带位置控制视觉宽度，调整百分比数值就能精准控制环的粗细和衰减过渡。
