HTML结合CSS实现页面骨架屏加载效果（超实用）-html教程-PHP中文网

骨架屏必须随服务端html输出、初始可见占位、用opacity+渐变模拟加载态，动画绑定伪元素，响应式用min-width媒体查询，加载完成仅过渡opacity和transform。

html结合css实现页面骨架屏加载效果（超实用）

骨架屏不是加个灰色 div 就完事，关键得让浏览器在真实内容加载前不重排、不闪动、能感知加载状态——否则用户看到的是“先白再灰再内容”，体验反而更差。

为什么直接用 `visibility: hidden` 或 `display: none` 的骨架屏会失败

常见错误是等 JS 加载完才显示骨架屏，或用 JS 控制显隐，结果首屏渲染被阻塞，LCP（最大内容绘制）直接变差。骨架屏必须和服务端 HTML 一起输出，且初始状态需为可见+占位，不能靠 JS 插入。

服务端未输出骨架结构 → 首屏空白时间拉长，CLS（累积布局偏移）飙升
用 display: none 初始隐藏 → 骨架不参与布局流，真实内容插入时触发重排，出现“跳动”
用 visibility: hidden → 元素仍占空间，但不可见，JS 显示时若样式未预加载完，可能短暂闪出原始文字

正确做法：骨架结构随 HTML 一起下发，CSS 用 opacity: 0.1 + background: linear-gradient 模拟加载态，真实内容用 data-loaded 属性控制渐显。

`keyframes` 动画必须绑定到伪元素，而非骨架容器本身

如果直接对 .skeleton-card 设置 animation: loading 1.5s ease-in-out infinite，动画会随 DOM 节点存在而持续运行，即使内容已加载完成。更糟的是，多个骨架节点共用同一动画名时，浏览器可能复用动画实例，导致节奏错乱。

动画定义只写一次：

@keyframes loading {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

真正应用动画的，是每个骨架子元素的 ::before 伪类，且必须带 content: "" 和 position: absolute
父容器设 position: relative，确保伪元素定位不脱标

示例：.skeleton-title::before 覆盖文字区域，.skeleton-avatar::before 覆盖头像圆角区域——分离控制，互不干扰。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

响应式骨架屏要靠 `min-width` 媒体查询，别用 `max-width`

移动端优先开发时，很多人写 @media (max-width: 768px) 覆盖骨架样式，结果在 iPad 等设备上因像素密度高、viewport 缩放，实际宽度超过 768px 却没命中规则，骨架错位或宽高比崩坏。

骨架结构本身应基于 rem 或 viewport 单位（如 width: 10rem），避免固定 px
媒体查询统一用 min-width，从最小屏往上叠加：@media (min-width: 480px) → (min-width: 768px) → (min-width: 1024px)
关键断点处重置 background-size，防止渐变条纹过密或过疏（比如小屏设 background-size: 300px 100%，大屏设 600px 100%）

加载完成时，`transition` 必须作用于 `opacity` 和 `transform`，禁用 `height` 或 `margin`

用 height: 0 → height: auto 实现展开，或 margin-top: -20px → 0 拉入内容，都会触发浏览器 Layout 计算，造成卡顿，尤其在低端安卓机上明显掉帧。

真实内容容器初始设 opacity: 0; transform: translateY(10px);
加载完成后添加 class：.loaded { opacity: 1; transform: translateY(0); transition: opacity 0.3s, transform 0.3s; }
务必加 will-change: opacity, transform 提前告知合成层，避免每帧重绘

注意：transition 不要写在初始样式里，只写在 .loaded 中，否则未加载时也占 GPU 资源。

最易被忽略的一点：骨架屏的 background-image: linear-gradient 务必加上 background-size 和 background-attachment: scroll，否则在 iOS Safari 滚动时会出现渐变条纹撕裂——这不是 bug，是 WebKit 对 fixed 背景的优化策略所致。