用 svg 的 配合 @keyframes 实现雷达扫描线旋转动画：设 viewbox="0 0 200 200"，线从圆心 (100,100) 指向 (100,0)，transform-origin: 100px 100px，动画 rotate(0deg) 到 rotate(360deg)，加 will-change: transform 和 linear 时序确保流畅。
雷达扫描线怎么用 @keyframes 实现旋转动画
雷达扫描动效的核心是「一条从中心出发、匀速扫过圆形区域的斜线」，不是整个圆盘转，而是扫描线绕中心点旋转。直接对元素用 transform: rotate() 最简单，但必须确保旋转原点在圆心（transform-origin: center），否则会偏移。常见错误是把扫描线写成 div 块级元素，默认宽高撑开、原点不在视觉中心——得用 position: absolute + top/left 居中，或更稳妥地用 svg 的 <line></line> 配合 transform-box: fill-box。
推荐做法：
- 用
svg容器定义固定宽高（如200px），viewBox="0 0 200 200" - 扫描线用
<line x1="100" y1="100" x2="100" y2="0"></line>（从圆心指向正上方） - 动画只作用于该
<line></line>，transform-origin: 100px 100px（与 viewBox 原点对齐） @keyframes scan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
扫描线末端为什么看起来不尖锐？渐变怎么加才自然
纯色扫描线扫过时，边缘硬切会显得机械；真实雷达有亮度衰减，靠 linear-gradient 模拟即可。但注意：SVG 中不能直接给 <line></line> 加 CSS 渐变，得用 <defs></defs> + <lineargradient></lineargradient> 定义，再通过 stroke 引用。关键点是渐变方向要和扫描线方向一致——比如线从圆心向上，渐变就该从 0% → 100% 垂直向下（即 to bottom），这样起点亮、终点暗。
实操要点：
- 渐变
id必须唯一，且stroke="url(#scanGradient)"中的括号和井号不能漏 - 避免用
stroke-width: 2px这类固定值，改用相对单位如stroke-width="2"（SVG 坐标系下更稳定） - 若需扫描线带「拖尾感」，可叠加一层更粗、透明度更低的同路径线，用不同动画延迟实现
动画卡顿或跳帧？这些 CSS 属性必须加
雷达动画要求流畅（通常 2–4 秒一圈），但默认情况下浏览器可能降频渲染。必须显式启用硬件加速，并关闭可能触发重排的属性。最常漏的是 will-change: transform 和 transform: translateZ(0)（后者强制 GPU 合成）。
关键配置：
- 扫描线元素上加
will-change: transform（仅动画前一帧触发优化） -
@keyframes内只写transform，**绝对不要**出现left/top/width/height等触发布局的属性 - 动画时长设为
animation-duration: 3s，搭配animation-timing-function: linear（匀速，非缓动） - 若页面有其他 SVG 动画，检查是否共用同一
transform-origin值，冲突会导致错位
IE 或旧版 Safari 不支持 transform-origin 在 SVG 中生效？兼容方案
IE11 和 Safari ≤ 13.1 对 SVG 元素的 transform-origin 支持不一致，容易导致扫描线绕着左上角转。此时应回退到 transform 的矩阵写法，用 rotate(360, 100, 100) 显式指定旋转中心（数值需匹配 viewBox 尺寸）。
兼容写法示例：
line {
animation: scan 3s linear infinite;
}
@keyframes scan {
from { transform: rotate(0, 100, 100); }
to { transform: rotate(360, 100, 100); }
}
注意：rotate(a, cx, cy) 是 SVG transform 函数，不是 CSS；它不依赖 transform-origin，因此更可靠。但需确保所有坐标单位与 viewBox 一致，否则中心偏移。
真正麻烦的不是写法，而是调试时容易忽略 viewBox 和实际渲染尺寸的缩放关系——比如容器设了 width: 100% 但父容器没定高，viewBox 会被拉伸，旋转中心就飘了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
