CSS如何制作骨架屏加载效果_利用CSS动画模拟内容占位-css教程-PHP中文网

骨架屏不能只用 background-color，因其无法实现渐变过渡、精准模拟文字行高与图片比例，且会导致内容加载时布局跳动；正确做法是保持dom结构一致，用 linear-gradient 扫描动画+ aspect-ratio 等css方案确保视觉连贯与响应式稳定。

css如何制作骨架屏加载效果_利用css动画模拟内容占位

骨架屏为什么不能只用 background-color 模拟

纯色背景块看着像骨架屏，但真实加载时用户会明显感知到“从无到有”的突兀切换——因为 background-color 没有渐变过渡，且无法模拟文字行高、图片比例等细节占位。更关键的是，它无法和后续真实内容对齐：比如文字行高设为 1.5，骨架块却用固定 height，内容渲染后会出现跳动。

正确做法是让骨架元素结构与真实 DOM 一致（同级、同宽高、同 margin/padding），仅用 background + linear-gradient + animation 模拟“扫描光效”，视觉上形成动态加载感。

骨架容器必须保留真实内容的盒模型（padding、margin、line-height 不能省）
避免用 border 或 outline 做边框，它们不参与盒尺寸计算，容易错位
图片占位推荐用 aspect-ratio + background，而不是固定 height

如何用 linear-gradient 实现扫描光效动画

核心是用一个从左到右移动的渐变色带覆盖在灰度背景上，制造“光扫过”的错觉。不能直接 animating background-position 到 100%，否则光带会突然消失——得让它循环平滑经过。

典型写法：

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

background-size: 200% 100% 是关键：让渐变图案宽度翻倍，才能平滑滚动
起始位置设为 -200%，确保动画开始时不可见；结束于 200%，保证无缝衔接下一循环
动画时长建议 1.2–1.8s：太快显得急促，太慢降低加载感知
别用 ease-in-out，线性缓动（linear）最接近真实扫描效果

响应式骨架屏怎么保持宽高比不塌陷

移动端图片或卡片常需固定宽高比（如 16:9），但骨架元素若只设 width: 100%，高度会坍缩为 0。不能靠 JS 计算，得纯 CSS 解决。

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

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

下载

推荐两种可靠方式：

用 aspect-ratio: 16 / 9（现代浏览器支持良好，Chrome 88+、Firefox 89+、Safari 15.4+）
降级方案：利用 padding-top 百分比基于宽度计算的特性：
.skeleton-img { position: relative; width: 100%; padding-top: 56.25%; }，再用 position: absolute 子元素撑满

注意：如果父容器本身宽度不固定（比如 flex 项），padding-top 百分比可能失效，此时优先选 aspect-ratio 并加 @supports 降级。