纯 CSS 骨架屏：让你的网站加载不再“裸奔”
你有没有遇到过这样的窘境：辛辛苦苦建好的网站，兴冲冲地打开一看，好家伙，加载速度简直让人抓狂！白花花的一片，或者几个字孤零零地挂在那里，简直像在看一部默片，让人等的花儿都谢了。
这种“加载裸奔”的体验，简直是用户体验的噩梦。用户等得心烦，直接关掉页面，你的内容再精彩，也只能孤芳自赏了。
别担心，今天咱们就来聊聊如何用纯 CSS 打造一个优雅的骨架屏，让你的网站加载不再“裸奔”，给用户一个更友好的等待体验。
骨架屏：加载体验的救星
什么是骨架屏？简单来说，它就是在页面内容加载完成之前，先显示一个页面的大致轮廓。就像给建筑物搭建一个骨架一样，让用户知道页面大概长什么样，哪些地方会显示内容。
比起干巴巴的白屏，骨架屏能给用户一种“正在加载”的心理暗示，缓解等待焦虑，提高用户体验。就好比你去餐厅吃饭，服务员先给你上了几碟小菜，让你知道厨房正在忙活，而不是让你干等着饿肚子。
为什么要用纯 CSS 实现骨架屏？
实现骨架屏的方法有很多，比如用 JavaScript 动态生成，或者使用现成的库。但是，纯 CSS 实现骨架屏有很多优势：
- 性能更高： CSS 的加载速度通常比 JavaScript 更快，能更快地显示骨架屏，提升用户体验。
- 代码更简洁： 不需要额外的 JavaScript 代码，减少了代码量，也更容易维护。
- 适用性更广： 纯 CSS 可以应用于任何 HTML 页面，无需考虑 JavaScript 兼容性问题。
纯 CSS 骨架屏的秘密武器：伪元素和渐变
纯 CSS 骨架屏的核心技术就是伪元素（::before 和 ::after）和渐变（linear-gradient）。
- 伪元素： 伪元素允许我们在 HTML 元素的前后插入内容，而不需要修改 HTML 结构。我们可以利用伪元素来创建骨架屏的形状。
- 渐变： 渐变可以创建颜色过渡效果，我们可以利用渐变来模拟骨架屏的闪烁效果，让它看起来更生动。
手把手教你打造一个简单的骨架屏
光说不练假把式，咱们直接上代码，一步一步教你打造一个简单的骨架屏。
假设我们有一个文章列表，每个文章项包含标题、摘要和作者信息。我们可以这样创建一个骨架屏：
<div class="article-item skeleton">
<h2 class="skeleton-title"></h2>
<p class="skeleton-excerpt"></p>
<div class="skeleton-author"></div>
</div>这段 HTML 代码定义了一个文章项的骨架屏，包含了标题、摘要和作者信息的占位元素。接下来，我们用 CSS 来给这些占位元素添加样式：
.article-item.skeleton {
border: 1px solid #eee;
padding: 15px;
margin-bottom: 10px;
}
.skeleton-title {
height: 20px;
background-color: #f2f2f2;
margin-bottom: 10px;
width: 80%; /* 模拟标题的宽度 */
border-radius: 4px; /* 增加圆角 */
animation: skeleton-loading 1.5s linear infinite; /* 添加动画 */
}
.skeleton-excerpt {
height: 12px;
background-color: #f2f2f2;
margin-bottom: 8px;
width: 90%; /* 模拟摘要的宽度 */
border-radius: 4px;
animation: skeleton-loading 1.5s linear infinite;
}
.skeleton-author {
height: 16px;
width: 40%; /* 模拟作者信息的宽度 */
background-color: #f2f2f2;
border-radius: 8px; /* 模拟头像的圆形 */
animation: skeleton-loading 1.5s linear infinite;
}
@keyframes skeleton-loading {
0% {
background-color: #f2f2f2;
}
50% {
background-color: #ddd;
}
100% {
background-color: #f2f2f2;
}
}这段 CSS 代码做了以下几件事情：
- 给
article-item.skeleton添加边框、内边距和外边距，让骨架屏看起来更像一个文章项。 - 给
skeleton-title、skeleton-excerpt和skeleton-author设置高度、背景色和宽度，模拟标题、摘要和作者信息的形状。 - 使用
border-radius增加圆角，让骨架屏看起来更柔和。 - 使用
@keyframes定义一个名为skeleton-loading的动画，让背景色在f2f2f2和ddd之间循环变化，模拟闪烁效果。 - 将
skeleton-loading动画应用到skeleton-title、skeleton-excerpt和skeleton-author上，让它们都具有闪烁效果。
就这样，一个简单的骨架屏就完成了！当页面内容加载完成时，移除 skeleton 类即可。
更高级的骨架屏技巧
上面的例子只是一个简单的骨架屏，我们可以使用更高级的技巧来创建更逼真的骨架屏。
-
使用渐变模拟光影效果： 我们可以使用
linear-gradient创建一个带有光影效果的渐变，让骨架屏看起来更有层次感。background: linear-gradient(90deg, #f2f2f2 25%, #ddd 50%, #f2f2f2 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s linear infinite; @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }这段代码使用
linear-gradient创建了一个从f2f2f2到ddd再到f2f2f2的渐变，并使用background-size将背景大小设置为 200% 100%。然后，使用@keyframes定义一个动画，让背景位置在 200% 0 和 -200% 0 之间循环变化，从而模拟光影移动的效果。 -
使用伪元素创建更复杂的形状： 我们可以使用伪元素来创建更复杂的形状，比如圆形头像、按钮等等。
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #f2f2f2; position: relative; overflow: hidden; } .skeleton-avatar::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #f2f2f2 25%, #ddd 50%, #f2f2f2 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s linear infinite; }这段代码创建了一个圆形头像的骨架屏。首先，给
skeleton-avatar设置宽度、高度、圆角和背景色。然后，使用::before伪元素创建一个覆盖整个头像的渐变背景，并添加动画效果。 -
根据实际内容调整骨架屏的形状： 骨架屏的形状应该尽可能地接近实际内容的形状，这样才能给用户更准确的心理预期。例如，如果文章标题很长，那么骨架屏的标题也应该更长一些。
骨架屏的注意事项
虽然骨架屏能提升用户体验，但也需要注意一些细节：
- 不要过度设计： 骨架屏的目的是为了缓解等待焦虑，而不是为了吸引眼球。所以，不要过度设计骨架屏，以免分散用户的注意力。
- 保持一致性： 骨架屏的风格应该与网站的整体风格保持一致，这样才能给用户更流畅的体验。
- 考虑响应式： 骨架屏应该在不同的设备上都能正常显示，所以需要考虑响应式设计。
骨架屏的未来
随着前端技术的不断发展，骨架屏也会变得越来越智能。未来，我们可以利用人工智能技术来自动生成骨架屏，让骨架屏的创建更加高效。
总结
骨架屏是提升网站加载体验的利器，纯 CSS 骨架屏具有性能高、代码简洁、适用性广等优点。掌握了伪元素和渐变等技术，你就可以轻松打造一个优雅的骨架屏，让你的网站加载不再“裸奔”。
希望这篇文章能给你带来一些启发，让你在网站开发中更加得心应手。记住，用户体验至上，一个小小的骨架屏，就能带来意想不到的惊喜！
最后，祝你的网站加载速度飞起来，用户体验蹭蹭涨！