必须用background-position动画而非transform或opacity，因其仅改变渐变绘制起点，不触发重排重绘，gpu加速稳定、像素精准；而transform在safari等浏览器中边缘发虚、锯齿，opacity则无法呈现结构浮现。
直接用 background-position 动画 + 两层 linear-gradient 就能做出不闪、不跳、真可用的骨架屏；JS 只需监听加载完成并加个 class，其余全交给 CSS。
为什么必须用 background-position 而不是 transform 或 opacity
transform 移动背景层在 Safari 和旧安卓 WebView 中会边缘发虚、锯齿明显，因为硬件加速采样不准；opacity 只是忽明忽暗，完全看不出结构浮现。而 background-position 只改变渐变绘制起点，不触发重排重绘，GPU 合成稳定、像素对齐精准。
- 关键帧里必须写单位：
background-position: -200px 0，不能省略px，否则 IE/旧 Chrome 会忽略 - 缓动必须用
linear，ease会让光条在两端滞留，破坏阅读流的自然感 - 渐变方向固定为
to right或90deg，反向会违反用户从左到右的视觉习惯
两层 linear-gradient 怎么写才不出错
单层渐变只能铺灰，没法同时表达「结构轮廓」和「扫光动效」。必须用 background-image 显式声明两层：底层画结构（如头像圆角、标题长条），上层是半透扫光条，且两层共用同一组 background-size 和 background-position，否则光条会漂移、错位。
- 底层结构示例：
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)（头像） - 上层扫光示例：
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必须设为固定像素，如200px 100%；rem、vw在 iOS Safari 中完全失效 - 必须加
background-repeat: no-repeat，否则重复导致光条跳变
图片类占位怎么避免缩放后变形或露白边
img 元素本身不能撑空间——src 为空时宽高是 0×0，background 根本不渲染。真正能撑开空间的是显式设了尺寸的容器，比如 <div class="img-skeleton"></div>。
- 优先用
aspect-ratio: 16 / 9控制比例，比固定height更可靠；老 Safari（iOS 15.0–15.3）不支持，得 fallback 到padding-top: 56.25%，但前提是父容器有明确width - 所有骨架容器必须加
overflow: hidden，否则扫光滑出圆角区域会漏底色 - 骨架的
border-radius、box-shadow、边框宽度，必须和真实图片完全一致；差 1px，加载完成就会跳动
动画绑定在哪？加载完成后怎么平滑过渡
动画不能直接绑在骨架容器上，否则内容加载完动画还在跑，多个节点还可能复用动画实例导致节奏混乱。真正生效的，是每个骨架子元素的 ::before 伪元素。
- 父容器设
position: relative，伪元素才不会脱标 -
::before必须带content: ""和position: absolute - 加载完成只加一个 class（如
is-loaded），该 class 仅含opacity: 1；初始状态设opacity: 0+transition: opacity 0.3s ease - 别用
visibility: hidden → visible：它不触发动画，且可能引发重排；也别用display: none，否则骨架不参与布局流，真实内容插入时必跳
最容易被忽略的是：所有骨架容器的 overflow: hidden、aspect-ratio（或 fallback 的 padding-top）、以及与真实元素完全一致的圆角/阴影/边框——这些细节差一点，加载完成那一瞬间就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
