纯CSS实现箭头旋转动画需用border或伪元素绘箭头，配合transform:rotate()与transform-origin精准控制旋转中心，再通过@keyframes或transition驱动动画，避免触发重排、确保硬件加速。
怎么用 CSS 实现箭头旋转动画
纯 CSS 就能搞定，不需要 JS。关键不是“画箭头”，而是用 border 或 ::after 造形 + @keyframes 控制旋转，再用 transform: rotate() 驱动。别一上来就扒 SVG 动画，小图标级指示器完全没必要。
常见错误：直接对 <div> 设置 <code>border 三角后加 animation，结果整个块一起转，箭头歪了或位置飘移——这是因为没设 transform-origin。
- 推荐用伪元素
::after绘制箭头，主体元素只负责定位和动画控制 - 旋转中心点必须显式设为箭头尖端或中点，例如
transform-origin: center;或transform-origin: 50% 70%;（根据三角朝向微调） - 避免在
display: inline元素上直接动画，容易触发重排；优先用inline-block或flex子项
箭头形状怎么写才方便动画
用 border 画三角最轻量，但必须保证宽高为 0，只靠边框撑出形状。比如向下箭头：width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #333;。这样它是个无文档流的“点”，transform 才不会带偏父容器。
如果用 SVG，<path></path> 要注意 viewBox 对齐，否则 rotate() 会绕 SVG 左上角转，不是绕自身中心。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 纯 CSS 三角：确保四条边只有一条有颜色，其余
transparent，且border-width对称 - 用
clip-path或mask是高阶玩法，兼容性差（Safari 旧版不支持），不推荐用于基础指示器 - 若需响应不同尺寸，把
border-width改成em或rem，比固定像素更稳
旋转动画卡顿或闪一下怎么办
本质是浏览器没开启硬件加速，或者动画触发了 layout。典型表现：第一次播放卡、iOS 上掉帧、Chrome DevTools 里看到黄色渲染警告。
- 强制启用 GPU 加速：给动画元素加
transform: translateZ(0);或will-change: transform; - 别在
left/top上做动画，它们触发重排；只用transform和opacity - 动画时长别设太短（如
0.1s），低端机可能来不及渲染一帧；0.3s ~ 0.5s更稳妥 - 如果箭头在悬停时才转，记得加
transition: transform 0.3s ease;而不是全靠@keyframes，更顺滑
怎么让箭头指向动态数据方向
CSS 本身不能读取 JS 变量，所以“根据数值自动转向”必须交由 JS 控制 style.transform。但不用重写整套动画逻辑——只需把旋转角度抽出来，用 JS 更新。
例如：有一个实时温度差值 delta = 12，你想让箭头每 1° 对应 1° 旋转，就执行 el.style.transform = `rotate(${delta}deg)`。前提是元素已设好 transform-origin，且没被其他动画阻塞。
- 避免频繁设置
style.transform导致样式计算压力，可节流（throttle）更新频率 - 如果多个箭头共用同一动画规则，用 CSS 自定义属性（
--rotate-angle: 45deg）配合transform: rotate(var(--rotate-angle));，JS 只改属性值，更干净 - IE 不支持 CSS 变量，要兼容就得回退到 JS 直接写 style，或用 CSS-in-JS 方案
真正麻烦的不是转几度，而是初始角度对齐和坐标系理解——CSS 的 0° 是正右方，顺时针增加，跟数学极坐标相反。这点不校准，数据再准也指偏。
