CSS如何制作骨架屏？CSS加载占位动画技巧

前往漫画官网入口并下载

从现在开始，努力学习吧！本文《CSS如何制作骨架屏？CSS加载占位动画技巧》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

骨架屏是通过CSS实现的加载过渡效果，核心在于使用HTML结构与CSS动画模拟内容轮廓并提升用户体验。具体步骤包括：1. 使用HTML搭建无内容的页面结构；2. 通过CSS设置浅灰色背景与动画实现动态闪烁效果；3. 利用border-radius或clip-path控制骨架屏形状；4. 数据加载完成后通过JavaScript移除骨架屏；5. 优化性能时避免复杂形状、使用CSS动画并减少重绘重排；6. 可根据网络环境动态调整骨架屏复杂程度；7. 骨架屏区别于loading动画，其优势在于提供内容预期而非单纯提示加载。

骨架屏，说白了，就是在数据加载前，先用一些简单的形状“占个坑”，给用户一个“正在加载”的心理预期，避免长时间白屏带来的焦虑。CSS 就能搞定这件事，而且效果还不错。

CSS实现骨架屏，其实就是利用CSS的背景和动画效果。

解决方案

1. 基础结构： 先用HTML搭建一个简单的页面结构，比如文章标题、段落等。这些结构不需要真实的内容，只需要确定它们的位置和大小。

2. CSS样式： 关键在于CSS。给这些结构添加背景色，通常是浅灰色，模拟内容未加载时的状态。

   

3. 动画效果： 通过CSS动画，让这些浅灰色的背景色产生一种闪烁或渐变的效果，模拟数据加载的动态过程。

一个简单的例子：

<div class="skeleton-wrapper">
  <div class="skeleton-title"></div>
  <div class="skeleton-paragraph"></div>
  <div class="skeleton-image"></div>
</div>

.skeleton-wrapper {
  width: 80%;
  margin: 20px auto;
}

.skeleton-title {
  width: 60%;
  height: 30px;
  background-color: #eee;
  margin-bottom: 10px;
  border-radius: 5px;
  animation: skeleton-loading 1.5s linear infinite;
}

.skeleton-paragraph {
  width: 90%;
  height: 15px;
  background-color: #eee;
  margin-bottom: 5px;
  border-radius: 3px;
  animation: skeleton-loading 1.5s linear infinite;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  background-color: #eee;
  border-radius: 10px;
  animation: skeleton-loading 1.5s linear infinite;
}

@keyframes skeleton-loading {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    background-color: #eee;
  }
}

这段代码创建了一个简单的骨架屏，包含一个标题、一段文字和一个图片。关键是skeleton-loading这个动画，它让背景色在浅灰色之间循环变化，产生闪烁的效果。

如何更精细地控制骨架屏的形状？

骨架屏不一定要是矩形。你可以使用border-radius来创建圆角，甚至使用clip-path来创建更复杂的形状。例如，想要一个圆形头像的骨架屏，可以这样：

.skeleton-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 圆形的关键 */
  background-color: #eee;
  animation: skeleton-loading 1.5s linear infinite;
}

clip-path则更强大，可以创建任意形状。但要注意兼容性，一些老版本的浏览器可能不支持。

如何在数据加载完成后移除骨架屏？

这需要在JavaScript的配合下完成。当数据加载完成后，移除骨架屏的类名，或者直接移除骨架屏的HTML元素。一个简单的例子：

// 假设 dataLoaded 是一个布尔值，表示数据是否加载完成
if (dataLoaded) {
  const skeletonWrapper = document.querySelector('.skeleton-wrapper');
  skeletonWrapper.classList.add('hidden'); // 或者直接 skeletonWrapper.remove();
}

.skeleton-wrapper.hidden {
  display: none;
}

当dataLoaded为true时，给.skeleton-wrapper添加一个hidden类，将其隐藏。当然，更彻底的做法是直接移除骨架屏的HTML元素。

如何优化骨架屏的性能？

骨架屏本身不应该成为性能瓶颈。

• 避免过度复杂的形状： 复杂的clip-path或过多的元素会增加渲染负担。
• 使用CSS动画： CSS动画通常比JavaScript动画更高效。
• 减少重绘和重排： 尽量避免触发重绘和重排的操作。

如何针对不同的网络环境使用不同的骨架屏？

可以根据网络速度，显示不同复杂程度的骨架屏。比如，在弱网环境下，显示更简单的骨架屏，减少加载时间。这需要在JavaScript中检测网络速度，并根据结果动态调整骨架屏的样式。这有点复杂，但如果你的应用对用户体验要求很高，可以考虑这样做。

骨架屏和loading动画有什么区别？

骨架屏提供的是内容的大致轮廓，而loading动画通常是一个独立的、居中的动画元素，表示正在加载。骨架屏更注重用户体验，让用户对即将加载的内容有一个大致的预期，而loading动画则更简单直接。两者可以同时使用，但通常情况下，骨架屏的效果更好。

终于介绍完啦！小伙伴们，这篇关于《CSS如何制作骨架屏？CSS加载占位动画技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！