纯css骨架屏需用两层linear-gradient叠加实现结构与扫光动效，background-size禁用rem/vw而用px，动画仅靠background-position触发gpu加速，各区块用不同渐变组合绘制，opacity切换显隐防动画中断。
纯 CSS 骨架屏能跑在 iOS Safari 12.2+ 和 Android Chrome 62+ 上，不发请求、不占 JS 资源、动画由 GPU 加速——只要写对两层 linear-gradient、固定 background-size、只动 background-position，就能稳住首屏加载体验。
为什么单层 linear-gradient 无法实现真实骨架效果
单层渐变只能铺一种颜色或方向，既不能表达「结构轮廓」（比如头像圆角、标题长条），也无法叠加「扫光动效」。用户看到的是死灰一块，没有加载感，更谈不上模拟阅读流。
- 错误写法：
background: linear-gradient(90deg, #f0f0f0, #e0e0e0)→ 光条不动、无结构、无层次 - 正确思路：必须用
background-image显式声明两层，顺序为「底层结构 + 上层扫光」 - 两层共用同一组
background-size和background-position，否则动画错位、光条漂移
如何用多层 linear-gradient 拼出头像、标题、段落等结构
每个区块不是靠 div 堆，而是靠渐变“画”出来：用 radial-gradient 画头像圆角，用横向 linear-gradient 控制标题宽度，用重复渐变模拟多行段落。
- 头像占位：
background-image: radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)+background-size: 40px 40px - 标题占位：
background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%)+background-size: 200px 16px - 段落行：
background-repeat: repeat-y+background-size: 100% 12px，避免手动写多个.skeleton-text元素
background-size 为什么不能用 rem 或 vw
iOS Safari（所有 WebKit 内核）完全不支持 rem、vw 作为 background-size 的单位。写 background-size: 20rem 100% 在 iPhone 上会退化为默认值，导致光条拉伸、动画卡顿甚至消失。
- 安全写法：
background-size: 200px 100%（宽度设为明显大于容器的固定像素值） - 若需响应式光条宽度，用 JS 动态注入：
el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%` - 容器自身负责缩放：靠
width: 100%; max-width: 100%+<meta name="viewport" content="width=device-width, initial-scale=1">
动画必须用 background-position，别碰 transform
transform: translateX() 在旧版安卓 WebView（如 UC、QQ 浏览器）中直接失效；且触发重排，帧率不稳。而 background-position 是合成层动画，GPU 可加速，兼容性与性能双优。
- 正确动画定义：
@keyframes shine { from { background-position: -200px 0; } to { background-position: 200px 0; } } - 绑定时加
background-repeat: no-repeat，否则光条重复导致闪烁 - 起始偏移用负值（如
-200px），让光条从左外侧滑入，避免首帧突兀出现在中间 - 显隐切换务必用
opacity或visibility，禁用v-if/wx:if销毁重建，否则滚动位置丢失、iOS WebView 抖动
最易被忽略的一点：两层渐变的 background-position 必须同步更新——哪怕只改其中一层的偏移，另一层没跟上，扫光就会“脱节”，看起来像两个光条在打架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
