必须用background-position动画+::before伪元素，因transform在iOS Safari中会导致边缘模糊、渐变锯齿，而background-position仅改变绘制起点，不重排不重绘、像素精准、GPU加速更稳；单位不能省、background-size须大于容器、渐变方向限to right或90deg、需双层linear-gradient强耦合、必须no-repeat、iOS禁用rem/vw、伪元素需content和absolute、父容器relative、骨架节点overflow:hidden、加载完立即display:none、图片容器用aspect-ratio防畸变、光效位移范围须与background-size严格对齐。
必须用 background-position 动画 + ::before 伪元素，其他方案在 Safari 或旧安卓 WebView 中必然发虚、错位、闪屏。
为什么不能用 transform 移动背景层
有人用 transform: translateX() 推整个背景图层，结果在 iOS Safari 里边缘模糊、渐变锯齿。这是因为硬件加速采样精度下降，导致颜色过渡不齐；而 background-position 只改绘制起点，不重排、不重绘、像素级精准，GPU 加速也更稳。
- 动画声明中单位不能省：
background-position: -200px 0，写成-200 0会被 IE 和旧 Chrome 直接忽略 -
background-size宽度必须大于容器（如200px 100%或200% 100%），否则光条一滑到边界就消失 - 渐变方向只能是
to right或90deg，反向会违反阅读流，用户感知突兀
background-image 必须写两层，且参数强耦合
单层 linear-gradient 就是一块灰，看不出标题、头像、段落的结构层次。真正可用的骨架屏必须显式声明两层，共用同一组 background-size 和 background-position，否则光条和结构错位漂移。
- 底层结构（模拟轮廓）：
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-repeat: no-repeat，否则重复渲染导致闪烁跳变 - iOS Safari 不支持
rem或vw单位的background-size，固定像素最稳
::before 伪元素才是可控边界的唯一解
动画不能直接绑在骨架容器上——内容加载后动画还在跑，多个节点还会复用同一动画实例，导致节奏同步、失去真实感。伪元素才是隔离边界：
立即学习“前端免费学习笔记（深入）”；
-
::before必须带content: ""和position: absolute - 父容器必须设
position: relative，否则伪元素脱标溢出 - 所有骨架容器必须加
overflow: hidden，否则圆角区域光效滑出会漏白边 - 加载完成时立刻对整个骨架节点执行
display: none，不是等动画播完，也不是只切opacity——后者会触发重排，页面“跳一下”
图片占位别写死 height，用 aspect-ratio 防畸变
小屏缩放时，写死 height: 120px 会导致骨架与真实图片比例不一致，加载瞬间“跳一下”。正确做法是：
- 图片容器设
width: 100%+aspect-ratio: 4/3（或对应真实图比例） - 背景色或渐变通过
background而非height占位 -
aspect-ratio在现代浏览器（Chrome 88+、Safari 15.4+、Firefox 89+）已稳定支持，无需 polyfill
最容易被忽略的是：光效位移范围得覆盖整个容器宽度，比如设 background-size: 200px 100%，就得让 background-position 从 -200px 0 动到 200px 0，否则光条没扫全就断掉——这个数值必须和 background-size 对齐，差一个像素都可能露白边。
