骨架屏不能只用 background-color，因其无法实现渐变过渡、精准模拟文字行高与图片比例，且会导致内容加载时布局跳动；正确做法是保持DOM结构一致，用 linear-gradient 扫描动画+ aspect-ratio 等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 解决。
推荐两种可靠方式：
- 用
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 降级。
Vue/React 中控制骨架屏显隐的常见坑
很多人用 v-if 或 useState 控制骨架组件开关，结果页面闪动——因为骨架 DOM 被销毁重建，导致 layout shift 和动画重置。
- 正确做法是用
v-show或display: none切换，保留 DOM 结构和盒模型 - 避免在骨架组件内监听数据加载完成后再
setState隐藏自己，应由父组件统一控制显隐状态 - 服务端渲染（SSR）场景下，骨架屏需在首屏 HTML 中存在，否则 hydration 时会触发两次渲染
- 如果骨架动画用
opacity淡出，记得加transition: opacity .2s，否则隐藏瞬间太生硬
最易被忽略的一点：骨架屏的 z-index 必须低于真实内容，否则加载完成后内容可能被骨架层挡住——尤其当骨架用了 position: relative 时。
