真正可用的骨架屏必须用linear-gradient+background-position动画实现光扫效果，且所有容器需有明确宽高和overflow:hidden；background-position比transform更可靠，因后者在Safari等浏览器中易致边缘发虚、锯齿，而前者不触发重绘、像素精准，且需设background-size大于容器、渐变方向为90deg或to right、多层渐变分离结构与光效，并配overflow:hidden和aspect-ratio防错位。
纯色背景块不是骨架屏，它没有扫描感、不模拟结构、加载时还会跳动；真正可用的骨架屏必须用 linear-gradient + background-position 动画实现光扫效果，且所有容器需有明确宽高和 overflow: hidden。
为什么 background-position 动画比 transform 更可靠
有人试过用 transform: translateX() 移动整个背景层，结果在 Safari 和部分安卓 WebView 中边缘发虚、出现锯齿。这是因为 transform 触发硬件加速后，采样精度下降，渐变边界对不齐。而 background-position 只改变绘制起点，不重排布局、不触发重绘，性能稳、像素准。
- 动画声明里必须写
background-position: -200% 0，不能省略单位（0要写成0%或0px），IE 和旧版 Chrome 会忽略无单位值 -
background-size必须设为宽度大于容器（如200% 100%或300px 100%），否则位移一到边界就消失，动画断掉 - 渐变方向必须是
90deg或to right，否则光效左右颠倒，违反阅读习惯
多层渐变叠加才能避免“一块灰”
只写一个 background: linear-gradient(...)，结果就是整块区域同步亮一下，看不出标题、段落、头像的层次。正确做法是用 background-image 分离两层：底层是静态灰度结构，上层是带透明度的扫描光条。
- 示例写法：
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) - 必须配
background-size: 200px 100%（不能用rem，iOS Safari 不支持 rem 单位的background-size） - 初始
background-position建议设为-200px 0，让光条从左外侧入场，避免首帧突兀闪出
移动端错位？多半是 overflow 或 aspect-ratio 没设好
骨架容器没加 overflow: hidden，光效滑出圆角区域会露白边；图片占位没用 aspect-ratio 而是固定 height，缩放后比例失真——这两点在 iPhone 和小屏安卓上最明显。
- 每个骨架块（如
.skeleton-avatar、.skeleton-card）都必须加overflow: hidden - 图片类占位优先用
aspect-ratio: 4/3+width: 100%，别写死height: 200px - 头像用
radial-gradient模拟时，要配background-size: 40px 40px和border-radius: 50%，否则圆变椭
如何让多个骨架元素不同步“扫光”
所有块一起动，看着像机器人列队，反而暴露了“这是假的”。CSS 不支持随机 delay，但可以用预设档位手动破齐。
- 给不同语义块加 class：
.skeleton-title、.skeleton-avatar、.skeleton-paragraph - 分别设
animation-delay: 0s/0.2s/0.4s，形成自然错落 - 千万别用 JS 动态加 delay —— SSR 渲染或禁 JS 环境下骨架直接失效
最容易被忽略的是：骨架屏必须和真实内容共享完全一致的盒模型（padding、margin、line-height、border-radius），否则数据一加载，页面就会跳。这点在 flex/grid 布局中尤其难对齐，建议用浏览器开发者工具逐层比对尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
