真正可用的骨架屏方案是两层linear-gradient加background-position动画绑定伪元素，且容器必须overflow: hidden；因transform和opacity动画在safari及旧安卓webview中易发虚、锯齿或失效，而background-position仅改变渐变起点，不重排不重绘，gpu加速且像素对齐稳定。
直接用 background-color 做骨架屏，加载时必然跳动、结构失真、iOS 上卡顿——真正可用的方案只有一条路：两层 linear-gradient + background-position 动画，绑定到伪元素，且所有容器必须带 overflow: hidden。
为什么 background-position 动画不能换别的
有人试过 transform: translateX() 或 opacity 动画，结果在 Safari 和旧版安卓 WebView 里边缘发虚、锯齿明显，甚至动画直接不触发。因为 transform 会强制重排，opacity 只是忽明忽暗，都没法模拟“光扫过”的阅读流感。而 background-position 仅改变渐变绘制起点，不重排、不重绘，GPU 合成层直接加速，像素对齐也稳。
-
background-position的值必须带单位：-200px 0，不能写成-200 0（IE/旧 Chrome 会忽略） - 渐变方向必须是
to right或90deg，反向就违反从左到右的阅读习惯 - 动画缓动必须用
linear，ease会让光在两端滞留，破坏流动节奏
两层 linear-gradient 怎么写才不出错
单层渐变只能铺灰，看不出标题、头像、段落的层次。必须用 background-image 显式声明两层，且参数强耦合：
- 底层结构：用三色灰度渐变模拟明暗过渡，例如
linear-gradient(to right, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) - 顶层扫光：用带透明度的亮色条，例如
linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) - 两层共用同一组
background-size（如200px 100%）和background-position，否则光条会漂移 - 必须加
background-repeat: no-repeat，否则重复导致闪烁跳变
移动端适配最容易踩的三个坑
iOS Safari 对单位极其挑剔，很多看似合理的写法在 iPhone 上直接失效：
-
background-size禁用rem、vw，只认固定像素或百分比（如200px 100%），写20rem 100%就等于没写 - 图片占位不用
height，改用aspect-ratio: 4/3+width: 100%，否则小屏缩放会畸变 - 每个骨架容器必须设
overflow: hidden，否则圆角区域光效滑出会漏白边
加载完成时怎么切才不闪
常见错误是等 JS 插入真实内容后再删 class，或靠 opacity: 0 隐藏骨架——都会触发重排，页面“跳一下”。正确做法是让骨架结构随服务端 HTML 一起输出，初始可见，加载完成后用 data-loaded 属性控制过渡：
- 真实内容插入前，骨架 DOM 已存在并参与布局流，避免 CLS 偏移
- 切换时只改
opacity和transform，配合transition: opacity 0.3s, transform 0.3s - 动画结束立刻用
display: none移除骨架层，不是等@keyframes播完——否则用户会看到最后一帧卡住
最易被忽略的是：骨架屏的价值不在“动”，而在让浏览器和用户都明确感知“内容正在途中”。只要光效方向、尺寸、时机稍有偏差，就会从“安抚”变成“干扰”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
