color-mix() 和 relative color syntax（如 oklch(from …)）不能直接驱动波浪动画，因二者仅静态求值，而波浪效果依赖 background-position 连续位移；正确做法是用它们定义颜色变量或动态生成高光色，并配合 background-size: 200% 100% 和 overflow: hidden 实现流畅动画。
现代 CSS 的 color-mix() 和 relative color syntax（如 oklch(from …)）本身不能直接驱动波浪动画，因为它们不参与 background-position 动画或渐变位移——骨架屏的“波浪感”靠的是动态背景位移，不是颜色计算。
为什么不能直接用 oklch(from …) 实现波浪动画
相对颜色语法（如 oklch(from var(--skeleton-bg) l c h)）只在声明时求值，生成一个静态色值；而波浪动画依赖 background-position 连续变化，需要两层渐变纹理 + 可平移的 background-size。你改不了颜色模型，但可以更优雅地管理颜色变量。
- 错误做法：
background: linear-gradient(90deg, oklch(from #e2e8f0 l c h), ...)→ 无效，oklch()不支持在linear-gradient()中动态插值 - 正确路径：用
oklch()定义基础色变量，再在渐变中引用该变量（它会被提前解析为 RGB 值） - 例如：
:root { --skeleton-base: oklch(0.85 0.015 240); }，然后background: linear-gradient(90deg, var(--skeleton-base), #cbd5e1, var(--skeleton-base));
用 color-mix() 动态生成骨架高光色（真正有用的地方）
color-mix() 在骨架屏里最实用的场景，是根据主题色自适应生成扫光条纹的明暗对比——比如深色模式下，高光不能还是浅灰，否则看不见。
- 写法示例：
--shine-color: color-mix(in oklch, white 30%, var(--skeleton-base) 70%); - 这样扫光条纹始终比底色亮 30%，无论底色是
#e2e8f0还是oklch(0.2 0.02 220) - 注意：
color-mix()目前仅 Chromium 111+ 和 Safari 16.4+ 支持，Firefox 尚未实现；生产环境需加降级：background: linear-gradient(90deg, #f1f5f9, #cbd5e1, #f1f5f9); background: linear-gradient(90deg, color-mix(...), color-mix(...), color-mix(...));
动画层必须保持独立，别让颜色语法拖慢重绘
很多人试图把 oklch() 或 color-mix() 放进 @keyframes 里，以为能做出“颜色流动”的效果。这不仅无效，还会让浏览器放弃硬件加速，导致动画卡顿。
- 动画只应作用于
background-position，且必须配background-size: 200% 100%和background-repeat: no-repeat - 渐变本身用静态色值（哪怕来自
var(--x)）；颜色变量只负责定义，不参与每帧计算 - 移动端尤其敏感：iOS Safari 对含函数调用的
background声明会退回到软件渲染，扫光一卡一卡的
真正优雅的骨架屏，不靠炫技的颜色函数，而靠克制的变量设计 + 稳定的位移动画 + 明确的 fallback 路径。最容易被忽略的是：所有骨架容器必须带 overflow: hidden，否则扫光滑出圆角时会漏底色——这个细节在 oklch() 再漂亮也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
