页面排版怎么制作带有加载动画的骨架屏布局结构-H5教程-PHP中文网

骨架屏应以空标签独立构建并严格对齐真实dom结构，禁用opacity/visibility隐藏，流光动画须用background-position位移实现且gpu加速，移动端用固定像素值，ssr时不服务端渲染，加载完成必须remove而非隐藏。

页面排版怎么制作带有加载动画的骨架屏布局结构

页面排版中制作带加载动画的骨架屏，关键不是“先做样式再加动画”，而是从结构设计出发，让骨架本身成为真实 DOM 的轻量映射——结构对齐、语义干净、动画独立、替换彻底。

结构必须用空标签独立构建

不要在真实标题、段落或卡片元素上加 opacity: 0 或 visibility: hidden。这类做法会让读屏器仍读出文字，JS 替换时容易遗漏节点，还会引发布局重排。

用无内容、无语义的空标签，例如：<div class="skeleton-title"></div>、<div class="skeleton-avatar"></div>
层级要和真实 DOM 严格对齐：如果真实结构是 .article > .article-header > h2，骨架就该是 .skeleton-article > .skeleton-header > .skeleton-line
禁用 <img>、<svg></svg> 和 aria-label，避免资源加载与可访问性干扰

动画必须用 background-position 位移驱动

流光效果不是靠透明度闪烁或元素平移，而是模拟光线扫过——这只能由渐变背景的横向位移实现，且全程 GPU 加速、不触发重绘。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

核心 CSS 组合：background-image: linear-gradient(90deg, transparent, #e0e0e0, transparent) + background-size: 200px 100% + animation: shine 2s linear infinite
@keyframes shine 必须写单位：background-position: -200px 0 → 200px 0（不能省略 px）
移动端尤其注意：禁用 rem、vw 做 background-size，iOS Safari 会退化失效；固定像素值更可靠

响应式与加载控制要解耦

骨架结构本身不参与业务逻辑，它的显示/隐藏、尺寸变化应完全由 CSS 控制，JS 只负责生命周期管理。

响应式用媒体查询切换 display，比如小屏下隐藏某块骨架：@media (max-width: 480px) { .skeleton-sidebar { display: none; } }
SSR 场景下，骨架只应在客户端注入；服务端返回的 HTML 中不应包含它，否则水合失败
加载完成必须调用 skeletonEl.remove()，而非 display: none —— 否则动画持续运行，单页应用反复进出易致内存泄漏

卡片类骨架推荐结构示例

以常见资讯卡片为例，HTML 结构极简，仅表达层级关系：

<div class="skeleton-card">
  <div class="skeleton-avatar"></div>
  <div class="skeleton-content">
    <div class="skeleton-title"></div>
    <div class="skeleton-paragraph"></div>
    <div class="skeleton-paragraph"></div>
  </div>
  <div class="skeleton-actions">
    <div class="skeleton-btn"></div>
  </div>
</div>

对应 CSS 中每类元素设固定宽高、圆角、背景色，并统一应用流光动画类，无需额外 wrapper 或伪元素。