基础扫光骨架屏本质是用linear-gradient创建窄亮条，通过background-position动画横向移动模拟光照掠过；需设to right方向、亮条宽约40px、动画时长1.5s~2s、起始位移-100%确保平滑入场。
用 linear-gradient + background-position 实现基础扫光效果
骨架屏的流光动效本质是让一个高亮色块在灰色背景上「扫过」，视觉上模拟光照掠过表面。最轻量、兼容性最好的方式是用 linear-gradient 定义一个窄条状的亮色区域，再通过 background-position 动画横向移动它。
关键点在于：渐变方向必须是 to right（或 90deg），亮区宽度控制在 40px 左右，两侧用透明或同色过渡避免硬边；动画时长建议 1.5s ~ 2s，太短显得突兀，太长失去「扫描感」。
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);-
background-size: 200px 100%;（控制亮条宽度和重复间距） animation: shimmer 1.8s infinite;
注意：不要用 background: radial-gradient 或多层渐变模拟光斑——性能差、难对齐、移动端掉帧明显。
为什么 @keyframes 必须从 -100% 开始位移
如果动画直接从 0% 的 background-position: 0 0 移动到 100% 的 100% 0，亮条会从左边缘「突然出现」再滑出，首帧不自然。真正平滑的扫光需要亮条「提前入场」。
正确做法是让亮条初始位置在容器左侧外，比如设为 -100%，这样动画开始时它正从左往右「进入」可视区：
@keyframes shimmer {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
这个偏移值要和 background-size 匹配：若 background-size: 200px 100%，则 -200px 或 -100% 都可，但用百分比更适配响应式容器。
在真实骨架组件中怎么避免「光扫过太快」或「卡顿」
常见问题是动效在列表项或卡片中不同步，或者滚动时闪烁、跳帧。根本原因不是 CSS 写错了，而是渲染触发不当。
- 给骨架元素加
will-change: background-position;（仅对动画元素加，别全局滥用） - 确保父容器没有
overflow: hidden且未触发层叠上下文干扰合成——比如意外加了transform: translateZ(0)又没配contain: layout paint - 移动端 Safari 对
background-position动画优化较差，可改用mask-image+translateX替代（但需 iOS 15.4+） - 如果骨架结构复杂（如带圆角、阴影的卡片），把动效只应用在最外层容器，内部子元素用
background-color: #f0f0f0静态占位，别层层套动画
要不要用 JavaScript 控制启动/暂停？
绝大多数场景不需要。CSS 动画本身支持 animation-play-state: paused / running，配合类名切换即可：
- 加载开始时加类
is-loading，对应.is-loading { animation-play-state: running; } - 数据就绪后移除该类，动画自动暂停（注意：此时背景仍保留最后位置，视觉上就是「定格」在扫光结束态）
- 千万别用 JS 每帧去
requestAnimationFrame改backgroundPosition——毫无必要，且强制重排重绘
唯一需要 JS 干预的情况是：你得在用户滚动到视口才触发动效（懒加载骨架动画），这时用 IntersectionObserver 切换类名即可，动画逻辑仍在 CSS 里。
真正容易被忽略的是：动效持续时间要和接口 loading 时间匹配。如果接口 300ms 就返回，却用 2s 动画，用户会觉得「假加载」；建议根据实际接口 P95 响应时间反推动画时长，并提供 fallback 静态骨架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
