CSS如何制作骨架屏？CSS加载占位动画技巧-css教程-PHP中文网

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

尼克

发布： 2025-06-24 15:04:02

原创

253人浏览过

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

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

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

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

解决方案

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

立即学习“前端免费学习笔记（深入）”；
CSS样式： 关键在于CSS。给这些结构添加背景色，通常是浅灰色，模拟内容未加载时的状态。
动画效果： 通过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加载占位动画技巧的详细内容，更多请关注php中文网其它相关文章！