linear-gradient 是最轻量的骨架屏闪烁方案，纯 CSS 实现、无重排、GPU 加速友好；需精确匹配渐变方向、色带宽度、background-size 与 background-position，推荐垂直渐变配合横向位移，三色渐变更自然，动画时长 1.5s，伪元素承载动画并配合 opacity 过渡实现无缝切换，移动端需避免合成层混乱与全层重绘。
为什么用 linear-gradient 做骨架屏闪烁更轻量
不用额外图片或 SVG，纯 CSS 实现骨架屏闪烁动画，linear-gradient 是最直接的方案——它能通过背景色带的位移模拟「光扫过」效果，且不触发重排，GPU 加速友好。关键在于：渐变方向、色带宽度、background-size 和 background-position 的联动必须精确匹配，否则会出现断层或卡顿。
- 推荐用垂直渐变（
to right）配合横向移动，视觉上更接近“扫描”感 -
background-size要设为固定宽高比（如200% 100%），确保动画循环平滑 - 起始
background-position必须是负值（如-200% 0），否则第一帧无位移，动画会“跳”一下
怎么写一个可复用的骨架屏动画类
把动画抽成独立 class，方便在不同图片占位元素上复用。核心是定义 @keyframes + 控制背景尺寸与位移节奏：
`.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: skeleton-shine 1.5s infinite;
}
@keyframes skeleton-shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}`
- 三色渐变段（
#f0f0f0 → #e0e0e0 → #f0f0f0）比双色更自然，避免生硬边界 - 动画时长
1.5s是经验值：太快显得浮躁，太慢失去“加载中”暗示 - 不要用
%单位写background-size（如100% 100%），否则位移会失效
图片加载完成时如何无缝切换掉骨架屏
不能靠 JS 手动删 class 或改 display，那样会闪一下。正确做法是利用 img 的 load 事件 + CSS 过渡控制不透明度：
`<div class="skeleton-wrapper"> <img src="real.jpg" alt="" class="real-img"> </div>`
`.skeleton-wrapper {
position: relative;
}
.skeleton-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(...);
background-size: 200% 100%;
animation: skeleton-shine 1.5s infinite;
opacity: 1;
transition: opacity 0.3s ease;
}
.real-img {
opacity: 0;
transition: opacity 0.3s ease;
}
.real-img.loaded {
opacity: 1;
}
.skeleton-wrapper::before.loaded {
opacity: 0;
}`
- 用伪元素承载骨架动画，主图单独控制 opacity，两者叠加后 fade out/in 同步
- JS 只需监听
img.onload，然后给父容器加loaded类，不操作 DOM 结构 - 务必加
transition，否则opacity突变仍会感知到闪烁
移动端适配和性能要注意什么
在 iOS Safari 或低端安卓机上，background-position 动画可能掉帧。不是加 will-change 就行，得从源头压榨：
立即学习“前端免费学习笔记（深入）”；
- 禁用
background-attachment: fixed（哪怕没写也检查是否被继承） - 避免在
transform元素内部嵌套该动画，会导致合成层混乱 - 如果骨架区域高度不固定，
background-size改用200px 100%替代百分比，防止缩放时错位 - 真机测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Paint flashing”，确认只有骨架层在重绘
渐变动画本身不耗 GPU，但一旦和 box-shadow、filter 或多层 z-index 混用，就容易触发全层重绘。能不动 layout 就不动。
