background-position动画比opacity闪烁更有效，因其能模拟光线横向扫过占位块的自然节奏，触发用户对内容浮现的预期；而opacity仅造成无结构的闪烁感。
为什么 background-position 动画比 opacity 闪烁更有效
因为骨架屏的核心目标不是“提示正在加载”，而是“让用户感知内容结构正在浮现”。opacity 脉动或 visibility 切换只会造成闪烁感，无法模拟光线扫过页面的自然节奏；而 background-position 配合拉伸渐变背景，能制造出光束横向滑过占位块的视觉流，心理学上更易触发“内容即将出现”的预期。
linear-gradient + background-size 的关键参数组合
错误写法常卡在渐变方向、色值透明度和尺寸比例上。必须同时满足三个条件动画才自然：
-
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)—— 必须用90deg（横向），且中间色段不能太窄，否则光效断续 -
background-size: 400% 100%—— 这是位移距离的放大倍数，400%对应动画从100%移到0%时刚好完成一次完整扫掠 -
animation: shimmer 1.5s infinite linear—— 必须用linear缓动，ease会导致光效在两端滞留，破坏流动感
常见 DOM 结构适配陷阱
直接给 .card 或 .list-item 加骨架样式往往失败，原因在于继承与层叠干扰：
- 避免在已有
background的元素上叠加骨架，优先用伪元素::before承载渐变层 - 文字类占位（如标题、描述）需设
line-height和font-size为 0，否则文字会透出干扰灰阶效果 - 图片占位区域必须显式设
border-radius，否则圆角图骨架会显示直角背景边框 - 响应式场景下，
background-size值不能写死为像素，保持百分比单位才能随容器缩放
如何让骨架只在 loading 状态生效
纯 CSS 方案里，最轻量的控制方式是靠 class 切换，而不是 JS 操控内联样式：
- 初始状态：给容器加
class="skeleton-active"，对应 CSS 中写.skeleton-active .skeleton-item - 数据加载完成时，JS 只需执行
el.classList.remove('skeleton-active')，所有子占位自动失效 - 切忌用
style.display = 'none'隐藏骨架——这会破坏 DOM 占位，导致内容渲染后页面跳动 - 如果使用 Vue/React，把
skeleton-active绑定到 loading state 即可，无需额外逻辑
background-size 与 background-position 的数值耦合关系：改了前者却忘了同步调整动画关键帧里的 background-position 值，结果光效只动一半就重头开始。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
