background-position动画最可靠，因其不触发重排重绘、纯gpu加速、像素对齐精准；需满足三约束：渐变方向为90deg或to right、background-size宽度大于容器、关键帧中单位不可省略。
为什么 background-position 动画比 opacity 或 transform 更可靠
opacity 脉动只让整块区域忽明忽暗，用户看不出内容结构；transform: translateX() 在 Safari 和部分安卓 WebView 中会边缘发虚、锯齿，甚至完全失效。真正稳的只有 background-position 动画：它不触发重排重绘，纯 GPU 合成层加速，像素对齐精准。
关键约束有三个：
– 渐变方向必须是 90deg 或 to right，否则光效反向，违反阅读流
– background-size 宽度必须大于容器（如 200px 100% 或 200% 100%），否则位移一到边界就卡住
– 动画关键帧里 background-position 的单位不能省，0 得写成 0% 或 0px，否则 IE/旧 Chrome 会忽略
两层 linear-gradient 怎么写才不出错
单层 background: linear-gradient() 只能铺灰，没法同时表达「结构轮廓」和「扫描光效」。必须用 background-image 显式声明两层，顺序固定：底层结构 + 上层扫光。
- 底层示例（标题长条）：
linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%) - 上层示例（半透光条）：
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和background-position，否则动画错位、光条漂移 - 必须加
background-repeat: no-repeat，否则重复导致闪烁跳变
移动端适配最常踩的三个坑
iOS Safari 不支持 rem、vw 作为 background-size 单位，写了等于没写；小屏上圆角头像露白边、图片比例失真，多半是容器没设对。
-
background-size改用固定像素值，比如200px 100%；若需响应式，用 JS 动态写内联样式：el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%` - 所有骨架容器必须加
overflow: hidden，否则光效滑出圆角区域会漏白 - 图片占位优先用
aspect-ratio: 4/3+width: 100%，别写死height: 200px -
viewportmeta 必须含width=device-width, initial-scale=1，否则 iOS 上vw计算异常
加载完成时如何无缝切换掉骨架屏
JS 直接删 class 或设 display: none 会导致内容渲染后页面跳动——因为 DOM 占位被破坏了。正确做法是靠 opacity + transition 平滑过渡，再配合 img 的 load 事件或框架的 loading state 控制。
- 初始状态加 class：
skeleton-active，CSS 中写.skeleton-active .skeleton-item - 数据加载完，仅执行
el.classList.remove('skeleton-active')，所有子骨架自动退场 - 切忌用
style.display = 'none'，这会让骨架容器塌陷，真实内容进来时页面“弹一下” - Vue/React 中直接绑定
skeleton-active到 loading state 即可，无需额外逻辑
最容易被忽略的是 background-size 和 background-position 的数值耦合：改了前者却忘了同步调关键帧里的后者，结果光效只动一半就重头开始。这个细节在调试时几乎不报错，但视觉上就是“卡顿感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
