css变量不能直接驱动骨架屏扫描动画，必须结合background-image与background-position动画实现；变量仅用于控制颜色、速度、方向等可配置项，核心原理是linear-gradient生成高亮条并平移。
CSS 变量本身不能直接驱动骨架屏的扫描动画，但它是实现可维护、可复用扫描效果的关键组织方式——核心靠 background-image + linear-gradient 配合 background-position 动画，变量只负责控制颜色、位移速度、渐变方向等可配置项。
为什么不能只靠 CSS 变量做动画？
CSS 变量（--xxx）是静态值容器，无法被 @keyframes 直接动画化。想让“扫描光条”动起来，必须把变量注入到能被动画的属性里，比如 background-position 或 transform。
- 常见错误：写
@keyframes { to { --offset: 100%; } }—— 这不会触发重绘，动画无效 - 正确路径：用变量定义渐变参数 → 生成
background-image→ 对background-position做动画 - 扫描效果本质是「一个高亮色条在灰色背景上横向/纵向平移」，
linear-gradient是最轻量的实现方式
用 CSS 变量控制扫描方向与颜色
把易变部分抽成变量，避免重复写多套 keyframes：
:root {
--skeleton-bg: #f0f0f0;
--skeleton-shine: #e0e0e0;
--skeleton-scan-width: 80%;
--skeleton-scan-dir: to right; /* or to bottom */
}
<p>.skeleton {
background-color: var(--skeleton-bg);
background-image: linear-gradient(
var(--skeleton-scan-dir),
transparent 0%,
var(--skeleton-shine) 50%,
transparent 100%
);
background-size: var(--skeleton-scan-width) 100%;
background-repeat: no-repeat;
animation: skeleton-scan 1.6s ease-in-out infinite;
}</p><p>@keyframes skeleton-scan {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}</p>
-
--skeleton-scan-dir改为to bottom可切垂直扫描，同时需调整background-size和background-position的轴向（如改用0 -100%→0 100%） -
background-size控制光条粗细；太宽会像泛光，太窄则不自然 - 动画时长
1.6s是经验值：短于 1.2s 显得急促，长于 2s 有卡顿感
适配不同组件尺寸的响应式扫描
固定 background-size 在窄容器里会拉伸失真，需要用 100% 100% + 容器 overflow: hidden 配合位移控制：
.skeleton-avatar {
--skeleton-scan-width: 100%;
background-size: 200% 100%; /* 宽度翻倍，保证光条始终可见 */
border-radius: 50%;
overflow: hidden;
}
<p>.skeleton-avatar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: inherit;
background-position: -100% 0;
animation: skeleton-scan 1.4s ease-in-out infinite;
}</p>
- 圆形容器必须加
overflow: hidden，否则光条会溢出边缘 - 用
background-size: 200% 100%+background-position: -100% → 100%实现“从左进、右出”的完整扫过效果 - 伪元素
::before方案比直接在元素上设背景更灵活，避免干扰原有背景逻辑
兼容性与性能注意点
IE 不支持 CSS 变量和 linear-gradient 动画，但现代项目基本可忽略；真正要盯的是性能陷阱：
- 避免在
scroll中频繁切换骨架状态——用will-change: background-position提前提示渲染层，但仅对正在动画的元素加，别全局滥用 - 移动端 Safari 对
background-position动画有帧率限制，若发现卡顿，可改用transform: translateX()模拟，但需额外包裹一层元素 - 多个骨架并列时，别共用同一份
@keyframes名称却不同速——浏览器可能复用动画实例导致错乱，建议按速度命名，如skeleton-scan-fast、skeleton-scan-slow
变量只是胶水，扫描动画的质感藏在渐变角度、位移范围、缓动曲线这些细节里——调一次 ease-in-out 和 cubic-bezier(0.4,0,0.2,1) 的差别，比换十个变量名都明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
