唯一靠谱方案是background-position动画配合::before伪元素；因它不触发重排重绘、GPU加速、像素精准，且需两层渐变分离结构与光效、固定像素background-size、to right方向、linear缓动、overflow:hidden及加载完成立即display:none。
用 background-position 动画配合伪元素定位，是唯一能稳定实现动态光影骨架屏的方式。其他方案（如 transform 移动背景层、opacity 闪动、单层渐变）在 Safari、iOS WebView 或安卓旧版浏览器中必然出现发虚、错位、卡顿或闪屏。
为什么必须用 ::before 伪元素承载动画
动画不能直接绑在骨架容器上——否则加载完成时无法干净隐藏，多个节点还会复用同一动画实例导致节奏同步、失去真实感。伪元素才是可控边界：
-
::before必须带content: ""和position: absolute - 父容器必须设
position: relative，否则伪元素脱标溢出 - 所有骨架容器必须加
overflow: hidden，否则圆角区域光效滑出漏白边 - 动画结束不靠“播完再删”，而是内容加载后立刻对整个骨架节点执行
display: none
background-position 动画的单位和取值陷阱
单位省略等于失效，尤其在 IE 和旧 Chrome 中会直接忽略整个声明：
- 起始位置必须写成
background-position: -200px 0或-200% 0%，不能写-200 0 -
background-size必须用固定像素（如200px 100%），iOS Safari 不支持rem或vw单位 - 渐变方向必须是
to right或90deg，反向会导致光效违反阅读流 - 位移范围建议设为
-200% 0→200% 0，确保光条平滑循环入场，不突兀闪出
两层渐变怎么写才不漂移
单层 linear-gradient 只能铺灰，看不出结构层次。真正可用的骨架屏必须用 background-image 显式声明两层，且参数强耦合：
立即学习“前端免费学习笔记（深入）”；
- 底层结构：用灰度过渡模拟文字/头像轮廓，例如
linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%) - 上层扫光：用透明度渐变制造高光流动感，例如
linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) - 两层共用同一组
background-size和background-position，否则光条与结构错位 - 必须加
background-repeat: no-repeat，否则重复导致闪烁跳变
最易被忽略的一点：图片占位不用 height，而要用 aspect-ratio + width: 100%。小屏缩放时，写死 height 会畸变，导致骨架与真实图片比例不一致，加载瞬间“跳一下”。
