直接写死颜色和尺寸导致loading动画难维护，因主题切换或尺寸调整需多处同步修改且无法响应深色模式；应使用css变量配合外部控制动画属性，避免在@keyframes中直接引用变量或错误使用calc()。
为什么直接写死颜色和尺寸会让Loading动画难维护
因为每次换主题、调大小，都得改一堆CSS选择器里的值。比如一个 .loader-dot 里写了 background: #3498db、width: 12px、animation-duration: 1.2s，那三个地方就得同步改三处——漏一个就错位。更麻烦的是，如果项目要支持深色/浅色模式切换，硬编码根本没法动态响应。
用 :root 定义变量并作用于动画关键帧
CSS变量必须在作用域内才生效，而 @keyframes 是独立作用域，不能直接读取外部变量（比如 :root 下的 --dot-color）。但可以绕过限制：
- 把动画中需要动态的部分（如
transform、opacity、box-shadow）抽出来，用var(--x)写在元素的style或类规则里，而不是塞进@keyframes - 在
@keyframes中只做结构化动作（如scale(1) → scale(0.6)），把数值逻辑交给外部变量控制 - 例如：让每个点的延迟由
--delay控制，就写成animation-delay: var(--delay, 0.2s)，而不是在 keyframes 里算
错误写法：@keyframes bounce { 50% { transform: translateY(calc(var(--offset) * -1)); } } —— 这在大多数浏览器里不生效。
calc() 和 var() 混合使用的边界条件
calc() 能嵌套 var()，但有硬性要求：
- 变量必须已声明且有默认值，否则整个
calc()表达式会退为无效值（浏览器忽略该样式） - 运算符前后必须有空格，
calc(var(--size)*2)是错的，得写成calc(var(--size) * 2) - 单位必须一致或可转换，
calc(var(--size) + 10px)合法，但calc(var(--size) + 10em)在未设基准字体时可能不可靠 - 常见用途：动态计算旋转角度（
rotate(calc(var(--i) * 30deg))）、偏移距离（translateX(calc(var(--step) * -20px))）
示例：给12个点做环形排布，HTML里每个 span 带 style="--i: 0" 到 --i: 11，CSS里写 transform: rotate(calc(var(--i) * 30deg)) translateX(120px)，就能自动分布。
主题切换时变量更新的时机与范围
用 JavaScript 改 document.documentElement.style.setProperty('--loader-color', '#2196F3') 确实能立刻生效，但要注意：
- 变量修改后，所有引用该变量的样式会重绘，但不会重触发动画（比如正在跑的
spin不会重启） - 如果想让动画“重新开始”，得触发强制重排：比如临时加个
animation: none再删掉，或切换 class 名 - 变量作用域是继承的，所以子元素可以直接用父级设置的变量，无需重复定义；但若父级没设，又没在
:root设默认值，就会回退到初始值（如color变成inherit） - 避免在媒体查询里重复定义同名变量，不同断点下的变量覆盖行为不易预测
真正容易被忽略的是：动画性能依赖 GPU 加速，而变量本身不触发硬件加速。如果用了 transform 或 opacity 做动画，记得补上 will-change: transform 或 transform: translateZ(0)，否则变量再灵活，卡顿照旧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
