如何用 CSS 实现加载态骨架屏（Skeleton Loading）动画效果-html教程-PHP中文网

如何用 CSS 实现加载态骨架屏（Skeleton Loading）动画效果

本文详解如何通过纯 css 创建可复用的骨架屏加载效果：使用透明文字 + 渐变灰阶背景动画，覆盖原始内容并模拟真实加载闪烁感，满足 fouc 风格的视觉提示需求。

本文详解如何通过纯 css 创建可复用的骨架屏加载效果：使用透明文字 + 渐变灰阶背景动画，覆盖原始内容并模拟真实加载闪烁感，满足 fouc 风格的视觉提示需求。

在现代 Web 应用中，骨架屏（Skeleton Screen）是提升用户感知性能的关键技术之一——它不依赖 JavaScript，仅靠 CSS 即可为尚未加载完成的内容区域提供视觉占位，避免空白或突兀的 FOUC（Flash of Unstyled Content）。但需注意：此处并非要修复 FOUC，而是主动模拟一种可控、柔和、符合设计语言的“加载态闪烁”效果。

核心实现思路有两点：

视觉遮蔽：将文本颜色设为 transparent，使内容不可见；
动态背景：通过 @keyframes 定义多阶灰色背景色的循环过渡动画，配合 animation 属性实现平滑闪烁。

以下为完整、可直接复用的 CSS 代码：

/* 骨架屏基础样式 */
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
  color: transparent; /* 关键：隐藏原始文本 */
  background-color: #F5F5F5; /* 初始背景色，确保未动画时也有占位 */
}

/* 多阶灰度背景动画（支持扩展至3种及以上颜色） */
@keyframes skeleton-loading {
  0% {
    background-color: #F5F5F5; /* 浅灰，如纸张底色 */
  }
  50% {
    background-color: #EAEAEA; /* 中灰，增强层次感 */
  }
  100% {
    background-color: #E2E2E2; /* 深灰，形成明暗交替节奏 */
  }
}

HTML 使用示例（与任意布局兼容）：

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

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

下载

<div class="infoColumns">
  <p>Item 1:</p>
  <p class="skeleton">Value for Item 1</p>
</div>

✅ 关键优势与注意事项：

✅ 零 JS 依赖：完全基于 CSS，轻量、高性能、易维护；
✅ 语义友好：保留原有 HTML 结构与可访问性（屏幕阅读器仍可读取文本，但视觉上被遮蔽）；
⚠️ 避免内容重叠：若 .skeleton 元素内含子元素（如 <span></span> 或图标），建议统一设 color: transparent 或添加 ::before/::after 伪元素覆盖，而非仅依赖父级透明；
⚠️ 响应式适配：动画时长（1s）和颜色阶梯可根据品牌规范调整——节奏过快易眩晕，过慢则失去“加载感”；推荐区间：0.8s–1.2s；
? 进阶提示：如需更真实效果，可叠加 background-image: linear-gradient(...) 模拟光影扫掠，或结合 clip-path 创建不规则占位形状。