可用css自定义属性驱动转圈动画：--size控制宽高、--color控制边框色、--duration控制animation-duration，但@keyframes内不可用var()，须将变量用于可继承属性，配合预设类或animation-play-state切换确保平滑。
如何用 CSS 自定义属性（--size、--color、--duration）驱动转圈动画
直接改变量就能换尺寸、颜色、速度，不用复制粘贴整套规则——这是可行的，但必须把变量用在对的位置。CSS 自定义属性不能直接进 @keyframes，所以旋转动画本身不能写 transform: rotate(var(--deg))；真正能动态控制的是动画外层：宽高、边框、时长、颜色这些“壳”，而旋转逻辑仍靠固定 @keyframes 驱动。
animation-duration 和 border-color 能直接绑定变量，但 @keyframes 不能
浏览器不支持在 @keyframes 块里使用 var(--x)，所以别尝试写 to { transform: rotate(calc(var(--rev) * 360deg)); }——它会静默失效。正确做法是把变量用在可继承/可计算的属性上：
-
animation-duration支持var(--duration, 1s)，可设默认值防未定义 -
border-color或border-top-color可直接写var(--color, #007bff)，深色模式下配合currentColor更稳 -
width/height用var(--size, 16px)，但记得同步设border-width: calc(var(--size) / 8)之类比例关系，否则粗细失衡 - 别把
transform-origin设成var(--origin)，它只接受关键词或坐标，变量值无法解析
为什么加 will-change: transform 后变量修改仍卡顿
变量更新本身不触发重排，但若你通过 JS 动态改 style.setProperty('--duration', '0.3s')，而元素已处于动画中，部分旧版 Safari 或 Android WebView 会丢掉合成层缓存，导致首帧跳变或掉帧。这不是变量的问题，而是浏览器对“运行中动画参数变更”的优化不足。
- 解决方案：用
animation-play-state: paused+ 变量更新 +animation-play-state: running触发平滑过渡 - 更稳妥的做法是提前定义多套预设类，比如
.spinner--fast、.spinner--slow，用 class 切换而非实时 setProperty - 如果必须 JS 控制，确保只改
animation-duration和颜色，避免同时改width或border-width—— 后者会触发 layout
用 :root 定义变量 vs 在组件上定义，影响什么
全局定义在 :root 里（如 --spinner-color: #007bff）方便主题切换，但所有实例共用一套值；局部定义在组件选择器上（如 .btn-loading::after { --size: 14px; }）则允许每个加载状态独立配置，且不会污染其他组件。
- 深色模式适配优先走
:root[data-theme="dark"]+currentColor组合，比硬写hsl(220, 90%, 40%)更易维护 - 伪元素（
::after）能继承父级自定义属性，但需确保父元素没用all: unset或inherit覆盖 - 变量名别用
--loading-spin这种泛化名，容易被其他库覆盖；推荐带命名空间，如--ui-spinner-size
实际最易被忽略的点是：变量更新后，animation 属性必须完整重写（哪怕只改一个值），否则浏览器可能复用旧缓存。比如从 spin 1s linear infinite 改为 spin var(--duration) linear infinite，不能只改中间那段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
