直接给加背景色或动画无效，因其是无宽高的inline替换元素；必须用容器包裹并设aspect-ratio或padding-top固定比例，配合background渐变扫光动画和opacity过渡实现平滑占位。

直接给 加背景色或动画基本无效——它默认是 inline 元素，没宽高、没内容、没渲染上下文，骨架根本出不来。

为什么不能直接在 上写骨架样式

常见错误现象：写了 img { background: #f0f0f0; }，页面一片空白；或者加了 @keyframes 但扫光不动。原因很实在：

• 是替换元素，不设 display: block 和显式 width/height，background 就不会绘制
• 懒加载时 src 被清空或挪到 data-src， 变成“空标签”，连 fallback 都不触发
• 伪元素（如 ::before）无法可靠继承 的尺寸，尤其在 flex/grid 容器里容易塌陷或错位

必须用容器包裹，并撑开固定比例空间

真实项目中，图片占位最怕加载时“抖一下”——那是高度坍缩导致的重排。解决方案不是 JS 计算，而是纯 CSS 固定比例：

• 首选 aspect-ratio: 16 / 9（Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持）
• 需兼容 iOS 15.0–15.3？加 fallback：padding-top: 56.25% + position: relative + 内部子元素 position: absolute
• 容器必须设 overflow: hidden，否则扫光动画滑出圆角会露底色
• 别用 height: auto 或 max-width: 100%，骨架层一旦失高，真实图片进来就会顶开布局

扫光动画怎么写才不翻车

核心不是“动起来”，而是“动得准、动得稳”。很多初学者复制代码后发现光条卡住、重复、或边缘发虚，问题往往出在三个参数上：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 背景必须是渐变纹理：background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，纯色背景 background-position 位移无效
• background-size 必须大于容器宽度，推荐 200px 100%（禁用 rem 或 vw，iOS Safari 会忽略）
• 动画必须配 background-repeat: no-repeat，否则光条重复出现、跳变
• 起始位置建议 background-position: -200% 0，终点 200% 0，时长 2s，缓动用 ease 比 linear 更自然

图片加载完成时如何平滑替换不闪不跳

最常被忽略的细节：骨架和真实图片必须在同一视觉层叠上下文中对齐，且切换只靠 opacity 过渡，不碰 layout。

• 真实 要绝对定位盖在骨架容器上，初始设 opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 监听 img.onload 后，只加一个 class（如 is-loaded），里面仅写 opacity: 1 —— 过渡由 transition: opacity 0.3s ease 承担
• 如果骨架是容器的 ::before，记得在 .is-loaded::before { display: none; } 关掉它，否则会叠在图片上
• 千万别用 display: none 或 visibility: hidden → visible 切换，前者触发布局重排，后者不触发 CSS 过渡

真正难的不是写出骨架，而是让骨架和真实图片在所有设备、所有加载时机下保持尺寸一致、定位精准、过渡无感——尤其是 Safari 的 aspect-ratio 兼容性、iOS 圆角溢出、以及 SSR 场景下内联样式的注入时机，这些点稍有疏忽，用户看到的就是白屏或抖动，而不是“优雅”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！