骨架屏加载效果的核心是通过浅灰色背景块模拟页面内容轮廓，再配合动态渐变效果营造加载中的视觉感受，整个过程不需要JavaScript参与，仅用CSS就能完成实现。
核心实现原理
骨架屏的实现主要依赖两个CSS特性：一是用linear-gradient创建带高光的渐变背景，二是用@keyframes定义背景位置变化的动画，让高光在背景块上循环移动，形成加载的动态效果。
基础骨架块样式
首先需要定义骨架块的基础样式，包括背景色、圆角、占位尺寸等，模拟不同内容区域的轮廓，比如文本行、图片区域、卡片容器等。
/* 基础骨架块样式 */
.skeleton-item {
background-color: #f0f0f0; /* 浅灰色背景 */
border-radius: 4px; /* 轻微圆角 */
margin-bottom: 12px; /* 块之间的间距 */
position: relative;
overflow: hidden; /* 隐藏超出范围的渐变高光 */
}
/* 模拟文本行的骨架块 */
.skeleton-text {
height: 16px;
width: 100%;
}
/* 模拟短文本行的骨架块 */
.skeleton-text-short {
height: 16px;
width: 60%;
}
/* 模拟图片/卡片的骨架块 */
.skeleton-img {
height: 200px;
width: 100%;
}
渐变与动画定义
接下来需要定义动态渐变背景和对应的动画，这里使用从左到右的渐变，其中中间段为更亮的灰色作为高光，通过动画改变背景的background-position实现高光移动的效果。
/* 定义骨架屏的渐变背景 */
.skeleton-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 渐变背景：左侧浅灰 中间亮灰 右侧浅灰 */
background: linear-gradient(
90deg,
#f0f0f0 0%,
#e8e8e8 20%,
#f0f0f0 40%
);
background-size: 200% 100%; /* 背景宽度设为2倍，方便移动 */
animation: skeleton-loading 1.5s infinite linear; /* 绑定动画 */
}
/* 定义加载动画 */
@keyframes skeleton-loading {
0% {
background-position: 100% 0; /* 初始位置在右侧 */
}
100% {
background-position: -100% 0; /* 结束位置在左侧 */
}
}
完整使用示例
将基础样式和动画结合，就可以搭建出完整的骨架屏结构，以下是模拟一个列表项的完整代码：
<div class="skeleton-container"> <!-- 模拟卡片容器 --> <div class="skeleton-item skeleton-img"></div> <!-- 模拟标题行 --> <div class="skeleton-item skeleton-text"></div> <!-- 模拟内容行 --> <div class="skeleton-item skeleton-text"></div> <!-- 模拟短内容行 --> <div class="skeleton-item skeleton-text-short"></div> </div>
对应的容器样式可以补充如下，让整体布局更贴近真实内容：
.skeleton-container {
padding: 16px;
width: 300px;
border: 1px solid #eee;
border-radius: 8px;
}
效果优化建议
- 可以根据页面实际内容调整骨架块的高度、宽度和圆角，让骨架屏更贴近真实内容轮廓
- 动画时长建议设置在1.2s到2s之间，速度过快容易让用户产生视觉疲劳，过慢则达不到加载提示的效果
- 如果页面有多个骨架块，可以给不同块设置微小的动画延迟，让动态效果更自然
- 真实内容加载完成后，通过添加隐藏类或者直接移除骨架屏DOM，切换到真实内容展示即可
常见问题说明
如果渐变高光没有正常移动，首先检查background-size是否设置为了大于100%的宽度，其次确认overflow: hidden是否添加到了骨架块样式中，避免高光超出块范围显示异常。另外伪元素的content属性必须设置，否则伪元素不会生效。