用CSS骨架屏加载效果的核心是渐变背景+位移动画：1. 用语义化空元素占位并设浅灰底色和圆角；2. 线性渐变创建亮色条带，配合background-size和background-position实现扫描光效；3. 通过@keyframes让背景位置水平移动，时长1.5~2s，infinite循环；4. 优化细节如头像溢出隐藏、文字间距、按钮尺寸及动画错峰。
用 CSS 实现骨架屏加载效果，核心是用 渐变背景 + 位移动画 模拟内容“正在填充”的视觉节奏，不依赖图片或 JS，轻量且兼容性好。
1. 骨架屏结构：用占位元素代替真实内容
先用语义化但无内容的 HTML 元素（如 ）搭建布局结构，宽度、高度、圆角等与最终内容一致。例如头像用圆形 div，标题用长矩形，段落用几条短横线。
关键点：
- 所有骨架元素设
background-color: #f0f0f0（浅灰底色） - 统一加
border-radius模拟真实组件的圆角（如头像设50%，卡片设8px） - 避免用透明边框或阴影干扰渐变表现
2. 渐变背景：创建“扫描光效”的流动感
用 linear-gradient 做一个从左到右的亮色条带（如 #e0e0e0），再叠加在灰色底上。通过 background-size 控制条带宽度（建议 100px 100%），用 background-position 让它水平移动。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.skeleton {
background: linear-gradient(
90deg,
transparent,
#e0e0e0,
transparent
);
background-size: 100px 100%;
background-repeat: no-repeat;
}
3. 动画实现：让高亮条带持续滑过
用 @keyframes 让 background-position 从 -100px 移动到 100%，形成向右扫过的光效。动画时长建议 1.5s ~ 2s，ease-in-out 更自然。
完整动画规则：
@keyframes shine {
0% { background-position: -100px 0; }
100% { background-position: 100% 0; }
}
.skeleton {
animation: shine 1.8s infinite;
}
注意：给每个骨架元素单独加动画，或用 animation-delay 错开时间，避免所有元素同步闪烁。
4. 优化细节：更贴近真实加载体验
让骨架屏更可信，可补充这些小技巧：
- 头像区域加
overflow: hidden和border-radius: 50%，防止渐变溢出 - 文字行之间留适当
margin-bottom，模拟真实段落间距 - 对按钮类骨架，用
width: 80px; height: 32px;并设圆角，动画速度略快于文字（如1.4s） - 在加载完成时，用 CSS 类切换（如移除
.skeleton，添加.loaded）平滑过渡到真实内容
不复杂但容易忽略。关键是渐变方向、尺寸和动画节奏的配合——90度渐变+水平位移+1.5秒循环，就能稳稳撑起加载时的用户耐心。
