动画 · 加载与进度 · 04
骨架屏 骨架屏 = 数据加载时显示与内容同形的占位块并以微光扫过，让布局看起来「马上就好」而非损坏。
直达修改 Prompt →
播放 暂停 重播
尊重 prefers-reduced-motion：动画关闭，仅保留终态。
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Build a skeleton screen: grey placeholder blocks shaped like the content, with a 1.4s shimmer sweeping across via background-position. Reserve real sizes to avoid layout shift.
Replace the sweep with a simple two-state opacity pulse on the blocks; calmer and cheaper than a moving gradient.
Generate skeleton blocks from the actual component tree (same widths/heights as the loaded content), drive the shimmer with a single shared keyframe, and under prefers-reduced-motion render static blocks. Add aria-busy to the container.
修改类 Prompt 只动目标，不碰页面其余部分。
骨架屏是什么？ 骨架屏是一种加载态：它显示内容的形状，而不是转圈。柔光扫过占位块，让等待显得更短，且布局不跳动。占位尺寸要与真实内容一致，否则加载完成时页面会偏移。
动画 标本
触发 load
技术 css
时长 1.4s
缓动 ease-in-out
性能 background-position 什么时候用 List, card grid, or article loading Any view where content arrives after first paint 什么时候别用 Instant loads — a skeleton that flashes is worse than nothing When you cannot match placeholder sizes to real content Skeleton beats a spinner because it shows structure. Mismatched sizes cause a reflow jump on load.
获取代码 复制 CSS
CSS HTML
.anim-el {
animation-iteration-count: infinite;
animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }
.skel-wrap { width: min(220px, 100%); display: grid; gap: 12px; }
.skel-line {
height: 16px;
border-radius: 8px;
background: linear-gradient(90deg, #e7e8ee 25%, #f6f7fa 37%, #e7e8ee 63%);
background-size: 200% 100%;
animation-name: shimmer;
animation-duration: var(--anim-duration, 1.4s);
animation-timing-function: var(--anim-easing, ease-in-out);
}
.skel-line:nth-child(2) { width: 80%; }
.skel-line:nth-child(3) { width: 60%; }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
} <div class="skel-wrap">
<div class="skel-line anim-el"></div>
<div class="skel-line anim-el"></div>
<div class="skel-line anim-el"></div>
</div> 复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。
复制 Prompt Build a skeleton screen: grey placeholder blocks shaped like the content, with a 1.4s shimmer sweeping across via background-position. Reserve real sizes to avoid layout shift.