background-position动画比opacity更适合skeleton效果，因其通过移动渐变起点实现结构浮现，不触发重排重绘、GPU加速稳定且像素对齐精准；而opacity仅控制整体透明度，无法体现内容结构层次。
为什么 background-position 动画比 opacity 更适合 skeleton 效果
opacity 只能控制整体透明度，看不出内容结构浮现过程；而 background-position 移动的是渐变绘制起点，不触发重排重绘，GPU 加速稳定，iOS Safari 和安卓 WebView 下像素对齐精准。常见错误是用 transform: translateX() 或 opacity 切换，结果在低端机上掉帧、边缘发虚。
如何写对两层 linear-gradient 实现结构+扫光
单层渐变只能铺色，无法同时表达「头像圆角」「标题长条」和「流动光效」。必须用 background-image 显式声明两层，顺序固定为「底层结构 + 上层扫光」：
- 头像：用
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)+background-size: 40px 40px - 标题：用
linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%)+background-size: 200px 16px - 扫光层：
linear-gradient(90deg, transparent, #e0e0e0, transparent)，background-size必须与底层一致（如200px 100%） - 两层共用同一组
background-position和background-repeat: no-repeat，否则动画错位
background-size 单位为什么不能用 rem 或 vw
iOS Safari（所有 WebKit 内核）完全不支持 rem、vw 作为 background-size 的单位。写成 background-size: 20rem 100% 会退化为默认值，导致光条拉伸或动画消失。安全写法是固定像素值，例如 background-size: 200px 100%。若需响应式宽度，用 JS 动态设置：el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%`。
加载完成时如何避免骨架屏闪一下
别用 display: none 或 visibility: hidden 隐藏骨架——这会破坏 DOM 占位，导致内容渲染后页面跳动。正确做法是靠 class 切换 + CSS 过渡：
立即学习“前端免费学习笔记（深入）”；
- 初始状态加
skeleton-active类，对应 CSS 中定义该类下的骨架样式 - 图片或数据加载完成时，执行
el.classList.remove('skeleton-active') - 确保动画关键帧里
background-position值与background-size匹配（如background-size: 200px 100%→ 关键帧写background-position: -200px 0） - 移除 class 后，骨架样式自然失效，内容平滑浮现
最容易被忽略的是 background-size 和 background-position 的数值耦合：改了前者却忘了同步调关键帧里的后者，结果光效只动一半就重头开始。
