骨架屏扫光 · Skeleton Shimmer
英文：Skeleton Shimmer
动效与交互难度：入门 ★
🗣️一句话大白话
骨架屏（加载占位块）上的微光扫过动效，暗示“正在加载中”。让骨架屏“活起来”的那道光泽。骨架屏本身是静态占位，扫光是它的“呼吸”：一条半透明高光从左到右扫过（linear-gradient 位移动画）。告诉 AI“骨架块上加从左到右的扫光，1.5s 循环”即可。要点：扫光 1.2-2s 循环最自然；动画只作用于 background-position（性能友好）；prefers-reduced-motion 时停掉。
🖼️样图参考
🎬真实场景
列表加载、详情页加载、卡片墙加载、移动端首屏
📮你可以这样说
「【图像模型版】[列表骨架] 每块占位加一道从左到右的柔和高光扫过，约 1.5s 循环，高光宽度 30%、透明度 0.08，整体轻快不刺眼。 【HTML/CSS/JS 版】[骨架块] 背景 linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%)，background-size 200%，animation shimmer 1.5s linear infinite（background-position 0→-200%）。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：扫光=骨架屏；扫光是骨架屏的动效层，骨架块本身是静态的
- ▸扫光太亮/太快会闪眼
🚫什么时候别用
- ✗prefers-reduced-motion 用户（直接停掉）
- ✗加载 <300ms 的内容（不需要骨架）
🧩常见变体
横向扫光上下脉动渐变流动
💡小贴士
- ✦只动 background-position 不卡；1.2-2s 循环最自然
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗