雷达扫描波纹需两个独立动画层叠实现：旋转扫描线用伪元素+transform: rotate()并启用gpu加速，同心圆扩散波纹用radial-gradient背景缩放动画，二者时长须一致且注意兼容性与性能优化。
雷达扫描波纹需要两个动画层叠
单个 @keyframes 无法同时实现「旋转扫描线 + 同心圆扩散波纹」，必须用两个独立元素分别控制：一个画旋转的细线（scan line），一个画从中心向外扩散的透明同心环（pulse ring）。浏览器渲染时叠加才像真实雷达——否则会卡顿或错位。
- 扫描线用
border或伪元素 +transform: rotate()实现，注意设transform-origin: center - 波纹用
radial-gradient背景 +background-size动画，避免用多个div堆叠，性能差且难控制透明度衰减 - 两者动画时长必须一致（比如都设为
8s），否则旋转和波纹不同步，看起来像故障设备
用 radial-gradient 制作可缩放波纹的关键参数
radial-gradient 的波纹本质是背景图的缩放动画。重点不是加多少层，而是控制好渐变色停靠点和 background-size 的起止值。
- 波纹初始状态：
background: radial-gradient(circle, rgba(0,128,0,0.4) 0%, transparent 70%)，0%是实心点，70%开始完全透明，留出边缘呼吸感 - 动画中
background-size从0% 0%变到200% 200%，数值越大，波纹扩散越远；别用100% 100%，否则波纹只到容器边缘就消失，缺乏“穿透感” - 必须加
background-repeat: no-repeat和background-position: center，否则缩放时背景会偏移或重复
旋转扫描线常见失真问题及修复
直接对元素用 rotate() 容易出现锯齿、闪烁或中心点漂移，尤其在 Safari 和旧版 Edge 上。
- 失真原因：元素有宽高或边框导致旋转轴心计算偏差，或未启用硬件加速
- 修复方式：给扫描线容器设
width: 2px; height: 2px;，用::before伪元素画线（content: ""+border-right: 2px solid #008000），再对其旋转 - 强制 GPU 加速：加
transform: rotate(0deg) translateZ(0)到动画关键帧里，避免浏览器用 CPU 渲染 - 别用
animation-timing-function: linear做扫描——真实雷达启动/停止有惯性，建议用cubic-bezier(0.3,0.6,0.7,0.4)
兼容性与性能取舍点
IE 完全不支持 radial-gradient 动画，但现代项目基本可忽略；真正要小心的是低端安卓 WebView 和部分 iOS 14 以下机型——它们对多层 transform + opacity 动画掉帧严重。
- 保底方案：检测
CSS.supports('background-image', 'radial-gradient()')，不支持时降级为单色旋转线（无波纹） - 减少重绘：波纹层设
will-change: background-size，但仅在动画触发前加，动画结束立即移除，否则长期占用内存 - 别把波纹做成 SVG
<circle></circle>+scale()动画——DOM 节点多、JS 控制复杂，CSS 方案更轻量也更易维护
真正难调的不是写出来，而是让波纹衰减节奏和旋转速度匹配人眼感知——快了像警报，慢了像卡顿。多试两遍 animation-duration 和渐变透明度百分比，比查文档管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
