骨架屏流动动画核心是用@keyframes控制linear-gradient背景位移模拟光扫效果：设浅灰底色骨架元素，叠加transparent-rgba(255,255,255,0.3)-transparent水平渐变伪元素，background-size设300%100%，animation绑定shine动画（0% background-position:-100% 0，100%:200% 0），时长1.5–2.5秒，并可优化delay错峰、深色适配及prefers-reduced-motion兼容。
骨架屏的闪烁流动动画，核心是用 @keyframes 控制背景渐变（linear-gradient）的位移，模拟光扫过的效果。关键不在“闪烁”，而在“流动感”——静态灰块 + 动态高亮条 = 看似加载中的视觉暗示。
1. 基础骨架结构与样式
先定义骨架元素，比如卡片区域，用浅灰（#f0f0f0）作底色，无文字、无边框，只保留占位形状：
.skeleton-card {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
position: relative;
overflow: hidden;
}
注意：必须设 position: relative 和 overflow: hidden，后续伪元素动画才可控。
2. 用伪元素 + 渐变实现流动光效
在骨架元素上叠加一个带线性渐变的伪元素（::before），让高亮色从左到右平滑移动：
.skeleton-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
background-size: 300% 100%;
animation: shine 2s infinite;
}
-
渐变方向：用
90deg实现水平流动；transparent → 半透明白 → transparent形成一道“光带” -
background-size：设为
300% 100%是为了让光带足够宽、过渡自然，避免生硬跳变 -
animation：绑定自定义动画
shine，时长建议 1.5–2.5 秒，太短显急促，太长像卡顿
3. 定义 @keyframes 流动动画
光效的本质是背景位置连续变化：
@keyframes shine {
0% {
background-position: -100% 0;
}
100% {
background-position: 200% 0;
}
}
这里的关键点：
- 起始位置
-100%：光带完全在左侧外，不可见 - 结束位置
200%：光带完全移出右侧，确保整段流动过程覆盖全部宽度 - 不写
from/to而用百分比，兼容性更稳；避免用100%回到起点造成明显重置感
4. 进阶优化建议
让骨架屏更真实、更轻量：
-
不同区块节奏错开：给多个骨架元素设置不同
animation-delay（如0.2s、0.5s），避免所有光同时扫过，显得更自然 -
适配深色模式：骨架底色改用
#333，高亮色用rgba(255,255,255,0.15)，保持对比度但不过曝 -
禁用动画场景：对系统偏好减少动画的用户，加媒体查询：
@media (prefers-reduced-motion: reduce) { animation: none; }
不需要 JavaScript，纯 CSS 就能完成。重点是渐变尺寸、位移范围和动画时长的配合——调好这三点，流动感就出来了。
