雷达扫描动画需用width/height和opacity实现同心圆匀速扩散，禁用transform:scale；关键为@keyframes中0%设宽高0、opacity1，100%设固定尺寸如200px、opacity0；须配linear时序、infinite循环、::before伪元素居中及will-change:transform优化性能。
用 @keyframes 控制圆环半径和透明度变化
雷达扫描动画本质是「同心圆从中心向外匀速扩张 + 逐渐淡出」，不能只靠 transform: scale()，否则边缘会模糊或失真。必须用 width/height 或 border-radius 配合 opacity 实现干净的圆形扩散。
关键点在于：起始状态设为 width: 0; height: 0; opacity: 1;，结束时设为足够大的尺寸（比如 width: 200px; height: 200px;）并 opacity: 0;。动画时长建议 1.8–2.2s，太短像闪，太长失去扫描感。
- 避免用
transform: scale(0) → scale(5)：缩放会继承父容器宽高，且抗锯齿在边缘易发虚 - 尺寸要固定（如
200px），别用百分比，否则响应式下圆环可能被裁或偏心 - 加
border-radius: 50%确保是正圆，哪怕宽高不完全相等也兜底
用 animation-timing-function: linear 保证匀速扩散
雷达扫描要求视觉上「匀速扫过」，如果用默认的 ease，开头快、结尾慢，会感觉卡在边缘；用 ease-in-out 更假。必须显式声明 linear。
另外，animation-iteration-count: infinite 是必须的，但要注意叠加多层时的延迟错位——这是实现「连续扫描线」感的核心。
- 单层动画加
animation-delay: -0.5s可让动画一加载就动起来，避免首帧停顿 - 若需模拟真实雷达的「亮线+余晖」效果，可叠两层：一层快（1.6s）、一层慢（2.0s），延迟错开
- 别用
steps()：它适合帧动画，不适用于平滑扩散
用伪元素 ::before 避免污染 DOM 结构
不需要额外写 ，直接用目标元素的 ::before 生成圆环更轻量。这样既保持 HTML 干净，又方便通过父容器控制定位和层级。
注意：必须给父容器设 position: relative，否则 ::before 的 absolute 定位会脱标到 body。
-
::before要设content: ""，否则不渲染 - 用
top: 50%; left: 50%; transform: translate(-50%, -50%)居中，比margin: auto更可靠 - 如果父容器有
overflow: hidden，圆环扩大会被裁，得临时放开或改用clip-path
兼容性与性能：优先用 will-change: transform 而非 opacity 升级图层
虽然 opacity 动画本身是合成属性，但和 width/height 混用时，浏览器可能降级到主进程重绘。实测发现，在 ::before 上加 will-change: transform 并配合 transform: translateZ(0)，能稳定触发 GPU 加速，尤其在 Safari 和旧版 Chrome 中掉帧明显减少。
不过，will-change 别乱加：只加在真正动画的元素上，且不要长期保留（可用 JS 动态增删），否则内存占用会上升。
- 别对整个雷达容器设
will-change: opacity，它不会加速尺寸变化 - 移动端务必测试 iOS Safari —— 它对
border-radius + animation组合偶有渲染撕裂，加-webkit-transform: translateZ(0)可修复 - 如果动画卡顿，先检查是否同时触发了 layout（比如动画中读取
offsetWidth）
实际最简可用代码就是几行：
.radar {
position: relative;
width: 200px;
height: 200px;
}
.radar::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 120, 255, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: scan 2s linear infinite;
will-change: transform;
}
@keyframes scan {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
圆环扩散的节奏感，藏在时间函数里；而是否顺滑，往往取决于你有没有在正确的地方加那一行 will-change。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
