用 linear-gradient + background-position 动画实现流光效果需配对 background-size（≥200% 100%）与渐变方向（90deg/to right），设明确宽高、linear 缓动、合理时长（1.5s–2s）及 staggered delay，并注意 overflow、aspect-ratio 和单位兼容性。
直接用 linear-gradient + background-position 动画就能做出自然的流光效果，但 90% 的失败都卡在 background-size 和渐变方向没配对上。
为什么 background-position 动画不动或只闪一下
常见现象：写了 @keyframes、设了 background-position: -100% 0 → 页面毫无反应，或光条刚动就重头开始。
根本原因是背景没“可位移的纹理”：单色 background: #f0f0f0 位移等于没动；没设 background-size 大于容器宽度，位移一到边界就消失。
实操建议：
- 必须用
background-image: linear-gradient(90deg, ...)，不能简写成background: -
background-size至少设为200% 100%（横向拉伸 2 倍），才能让background-position有足够位移空间 - 渐变方向必须是
90deg或to right，否则光效反向，违背从左到右的阅读节奏 - 元素必须有明确宽高（
height不能依赖内容），否则骨架块塌缩，动画不可见
怎样写出不卡顿、不突兀的扫描光效
动效“一顿一顿”或首帧闪出，基本是缓动函数和关键帧数值没对齐。
实操建议：
- 动画必须用
animation-timing-function: linear，ease或ease-in-out会在起点/终点减速，视觉上就是停顿 -
@keyframes中的background-position必须带单位（如-200% 0或-200px 0），IE 和旧版 Chrome 会忽略无单位值 - 初始位置建议设为
background-position: -200% 0，让光条从左外侧入场，避免第一帧突兀亮起 - 动画时长控制在
1.5s ~ 2s之间，太短像抽搐，太长削弱“正在加载”的即时感
多骨架元素如何避免集体跳闪
列表项共用同一套 animation，结果所有占位块同步亮灭，完全不像真实加载过程。
实操建议：
- 给每个
.skeleton-item加不同animation-delay，比如0.1s、0.2s、0.3s - 不要手写 10 个 delay 值——用 CSS 自定义属性批量生成：
--delay: calc(var(--index) * 0.1s)，再在元素上设animation-delay: var(--delay) - 更稳妥的做法是用伪元素
::before承载动画层，主元素只负责结构灰阶，避免样式冲突
移动端圆角图片+响应式下的常见错位
iPhone 上骨架圆角变直角、光效滑出边框、小屏下光条拉伸变形——八成是 overflow 和尺寸单位没管好。
实操建议：
- 所有骨架容器必须加
overflow: hidden，否则光效溢出圆角区域会露白边 - 图片类占位优先用
aspect-ratio: 4/3+width: 100%，别写死height: 200px -
background-size必须用像素（200px 100%）或百分比（400% 100%），iOS Safari 不支持rem单位 - 如果用伪元素实现光效，父容器需设
position: relative，伪元素设position: absolute并覆盖全区域
最容易被忽略的是 background-size 和 background-position 的数值耦合：改了前者却忘了同步调整后者，结果光效只扫一半就重头开始。调一次动效，两个值必须一起验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
