用CSS骨架屏加载效果的核心是渐变背景+位移动画：1. 用语义化空元素占位并设浅灰底色和圆角；2. 线性渐变创建亮色条带，配合background-size和background-position实现扫描光效；3. 通过@keyframes让背景位置水平移动，时长1.5~2s，infinite循环；4. 优化细节如头像溢出隐藏、文字间距、按钮尺寸及动画错峰。
用 CSS 实现骨架屏加载效果，核心是用 渐变背景 + 位移动画 模拟内容“正在填充”的视觉节奏，不依赖图片或 JS，轻量且兼容性好。
先用语义化但无内容的 HTML 元素（如 <div class="skeleton-text"></div>）搭建布局结构，宽度、高度、圆角等与最终内容一致。例如头像用圆形 div，标题用长矩形，段落用几条短横线。
关键点：
background-color: #f0f0f0（浅灰底色）border-radius 模拟真实组件的圆角（如头像设 50%，卡片设 8px）用 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;
}用 @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 错开时间，避免所有元素同步闪烁。
让骨架屏更可信，可补充这些小技巧：
overflow: hidden 和 border-radius: 50%，防止渐变溢出margin-bottom，模拟真实段落间距width: 80px; height: 32px; 并设圆角，动画速度略快于文字（如 1.4s）.skeleton，添加 .loaded）平滑过渡到真实内容不复杂但容易忽略。关键是渐变方向、尺寸和动画节奏的配合——90度渐变+水平位移+1.5秒循环，就能稳稳撑起加载时的用户耐心。
以上就是css骨架屏加载效果怎么做_利用渐变和动画模拟加载的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
327
收藏
取消收藏
