background-position动画比opacity切换更稳，因其用渐变光带平滑扫描模拟内容生成，不依赖dom可见性、不触发重排，且需linear缓动、起始值设为-100%/100%、避免will-change；伪元素::after实现解耦占位与语义，需relative定位、inset:0全覆盖、同步border-radius；图片骨架用aspect-ratio+内联svg确保响应式；真实图片加载后需尺寸/样式严格对齐骨架，onload时同步切换opacity与visibility以无缝过渡。
为什么 background-position 动画比 opacity 切换更稳
因为骨架屏要模拟“内容正在生成中”的视觉反馈，不是简单地淡入。opacity 从 0 到 1 会掩盖加载延迟——图片还没 ready 就先显示空白再闪一下，用户感知是“卡顿后跳变”。而 background-position 配合 background-size: 200% 100% 能让渐变光带平滑扫过整个区域，不依赖 DOM 可见性变化，也不触发重排。
关键点：
- 动画必须用
linear缓动，ease-in-out会导致光带起步/收尾变慢，破坏扫描感 -
background-position起始设为-100%或100%，不能用0%，否则动画第一帧就可见 - 移动端 Safari 对
will-change: background-position支持不稳定，直接加会偶发卡顿，别加
如何用 ::after 伪元素避免污染语义结构
直接给 <img> 或 <p></p> 加背景动画，容易覆盖真实内容样式，尤其当元素有 border、padding 或 box-shadow 时，骨架尺寸会错位。用 ::after 伪元素挂载动画层，能完全解耦占位与语义。
实操要点：
- 容器必须设
position: relative，伪元素才可绝对定位盖住内容 -
::after要设content: ""、inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），确保全覆盖 - 别用
z-index: -1把伪元素塞到背后——某些浏览器渲染顺序异常，导致动画层被遮挡 - 如果容器本身有
border-radius，伪元素也得同步设，否则圆角处露出底色
aspect-ratio + background-image: url("data:image/svg+xml,...") 处理响应式图片占位
图片骨架最易翻车：宽高不定、比例失真、加载后跳动。纯 CSS 解法是放弃 <img> 标签直接承载骨架，改用 <div class="img-placeholder"></div> 容器，并靠两个属性锁死表现：
-
aspect-ratio: 16 / 9—— 现代浏览器（Chrome 88+、Safari 15.4+）已稳定支持，比 JS 计算或 padding-top hack 更可靠 -
background-image: url("data:image/svg+xml,%3Csvg...")—— 内联 SVG 作为占位图，无 HTTP 请求，且可自由控制描边、圆角、渐变，适配深色模式时只需改 fill 值 - 容器必须显式设
display: block和width: 100%，否则aspect-ratio不生效 - 不要用
img[src]选择器控制骨架显隐——懒加载常清空src或走data-src，该选择器根本不会匹配
监听 onload 后如何自然过渡不闪屏
骨架消失和真实图片出现之间若有时间差，用户就会看到白屏一闪。核心不是“快”，而是“无缝”：两层必须严格对齐尺寸、圆角、阴影、甚至字体行高。
推荐做法：
- 真实
<img>绝对定位在骨架容器上，初始设opacity: 0+visibility: hidden - 监听
img.onload后，**同时** 移除骨架类、设visibility: visible、再设opacity: 1 - CSS 过渡只写
transition: opacity 0.2s ease，别加visibility过渡——它不支持动画，只能瞬切 - 失败回退时，保留骨架，仅在伪元素上叠加一层
::before显示 “加载失败”，不用alt文本——它不触发重绘，用户看不到提示
最常被忽略的点：骨架容器的 padding、margin、line-height 必须和真实内容完全一致。哪怕只差 1px，加载完成瞬间也会轻微跳动——人眼对位置变化比透明度变化敏感得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
