骨架屏闪烁关键在斜向匀速平移亮色条带：用25deg–30deg linear-gradient（transparent→#e0e0e0→transparent），background-size设200% 200%，background-position用百分比线性动画（0% 50%→100% 50%），时长1.5s–2.5s，配合no-repeat和overflow: hidden防溢出。
用 linear-gradient 做骨架屏闪烁，关键在角度和位移节奏
骨架屏的“闪烁感”不是靠颜色跳变，而是模拟光扫过的效果：一条亮色条带从左到右（或斜向）匀速平移，背景用深浅灰交替的线性渐变打底。角度选 25deg 或 30deg 最自然——太水平（0deg）像进度条，太垂直（90deg）没扫掠感，斜着才像真实光照。
常见错误是直接用 background-color 变化做闪烁，结果只是明暗闪，毫无骨架屏的“扫描”动效；还有人用 radial-gradient，边缘发散，根本没法平移出干净条带。
- 渐变必须至少三段：
transparent→ 亮灰（如#e0e0e0）→ 透明，形成清晰的移动高光区 - 背景尺寸要设大（比如
200% 200%），否则平移几下就露底色 - 动画时长控制在
1.5s～2.5s之间：太快像抖动，太慢失去“加载中”的提示节奏
animation 平移背景位置时，background-position 必须用百分比
用像素值（如 100px）平移会卡顿且不响应容器缩放；用百分比才能让动画在不同宽高比下都保持一致的扫掠比例。典型写法是 background-position: 0% 50%, 100% 50% 配合 background-size: 200% 200%，这样 0% → 100% 的位移实际覆盖整个渐变周期。
容易踩的坑：漏写 background-repeat: no-repeat，导致渐变重复拼接，平移时出现多条亮带；或者把 animation-timing-function 设成 ease，开头结尾减速，破坏匀速扫描感——这里必须用 linear。
立即学习“前端免费学习笔记（深入）”；
- 动画声明建议写全：
animation: shine 2s linear infinite -
@keyframes shine中只改background-position，不要碰background-size或颜色 - 如果容器有圆角（
border-radius），确保父元素加overflow: hidden，否则亮带会溢出边角
兼容性陷阱：Safari 对 background-position 多值动画支持不稳
Safari 15.4 之前版本无法正确动画多个 background-position 值（比如同时动 X 和 Y），会只动第一个值或直接失效。解决方案是只动单方向：用 25deg 渐变时，把动画拆成 background-position-x 单独驱动，Y 方向固定。
另一个问题是旧版 Chrome（background-size 大于 100% 的动画有渲染撕裂。稳妥做法是把尺寸控制在 150% 左右，并加 will-change: background-position 提前触发 GPU 加速。
- 测试必查：在 Safari 技术预览版里看亮带是否完整横贯容器
- 移动端 iOS 16+ 没问题，但 iOS 14.5 以下需降级为纯色脉冲动画（
opacity+background-color） - 别依赖
prefers-reduced-motion自动关动画——很多用户没开系统设置，得提供手动关闭开关
占位图上叠加骨架屏，z-index 和层叠上下文是隐形杀手
图片占位图（比如 <img src="placeholder.svg">）默认是替换元素，自带层叠上下文。如果骨架屏用伪元素（::after）盖在上面，但没处理好堆叠顺序，亮带会被压在图下面，完全看不见。
必须显式创建新层叠上下文：给占位图容器加 position: relative，伪元素设 position: absolute + z-index: 1，同时确保容器本身没有 transform 或 opacity < 1 ——这些都会意外创建新层叠上下文，打乱预期层级。
- 最简验证法：临时加
border: 1px solid red到伪元素，确认它真盖在图上 - 如果占位图用了
object-fit: cover，骨架屏伪元素也要同步设相同object-fit，否则错位 - 慎用
clip-path裁剪占位图——它会裁掉伪元素，得把clip-path移到父容器上
background-size。 
