使用CSS自定义属性实现骨架屏效果

使用CSS自定义属性实现骨架屏效果是一种常见的前端技巧，通过优化页面加载速度和用户体验，提升网站的性能。下面是详细的攻略：

一、什么是骨架屏？

骨架屏是一种在页面加载耗时较长的情况下，优化用户体验的技术手段。它可以快速展示页面的大致结构和布局，让用户感觉到页面正在加载，同时不会直接出现空白的页面。

二、使用CSS自定义属性实现骨架屏的原理

使用CSS自定义属性可以让我们在页面加载时，提前定义好页面结构的样式，等到数据加载完毕后，再替换掉自定义属性，从而快速显示页面的内容。

具体实现步骤如下：

1. 定义骨架屏结构的样式（使用CSS自定义属性）

/* 定义骨架屏元素样式 */
.skeleton {
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

/* 定义骨架屏占位样式 */
.skeleton::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-100%);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* 定义动画 */
@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 定义CSS自定义属性 */
:root {
  --skeleton-color: #e1e1e1;
}

1. 在页面中引用骨架屏结构样式

<div class="skeleton">
  <div class="skeleton-item" style="--skeleton-color: #f2f2f2"></div>
  <div class="skeleton-item" style="--skeleton-color: #e1e1e1"></div>
  <div class="skeleton-item" style="--skeleton-color: #f2f2f2"></div>
  <div class="skeleton-item" style="--skeleton-color: #e1e1e1"></div>
</div>

1. 在每个骨架屏元素中使用CSS自定义属性

/* 定义骨架屏元素样式 */
.skeleton-item {
  background-color: var(--skeleton-color);
  height: 30px;
  margin-bottom: 10px;
}

通过这种方式，我们就可以实现使用CSS自定义属性实现骨架屏的效果。

三、示例说明

示例一：列表骨架屏

<ul class="item-list skeleton">
  <li class="item">
    <div class="item-image skeleton-item"></div>
    <div class="item-title skeleton-item"></div>
    <div class="item-description skeleton-item"></div>
  </li>
  <li class="item">
    <div class="item-image skeleton-item"></div>
    <div class="item-title skeleton-item"></div>
    <div class="item-description skeleton-item"></div>
  </li>
</ul>

.item-list {
  padding: 0;
  list-style: none;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.item-title {
  width: 150px;
  height: 20px;
  margin-bottom: 5px;
}

.item-description {
  width: 250px;
  height: 15px;
}

.skeleton {
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-100%);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
   }
}

:root {
  --skeleton-color: #e1e1e1;
}

.skeleton-item {
  background-color: var(--skeleton-color);
  height: 30px;
  margin-bottom: 10px;
}

示例二：文章骨架屏

<div class="article skeleton">
  <div class="article-title skeleton-item"></div>
  <div class="article-meta skeleton-item"></div>
  <div class="article-content skeleton-item"></div>
  <div class="article-content skeleton-item"></div>
  <div class="article-content skeleton-item"></div>
</div>

.article {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

.article-title {
  width: 500px;
  height: 30px;
  margin-bottom: 10px;
}

.article-meta {
  width: 200px;
  height: 20px;
  margin-bottom: 10px;
}

.article-content {
  width: 100%;
  height: 15px;
  margin-bottom: 5px;
}

.skeleton {
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.skeleton::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-100%);
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

:root {
  --skeleton-color: #e1e1e1;
}

.skeleton-item {
  background-color: var(--skeleton-color);
  height: 30px;
  margin-bottom: 10px;
}

通过以上的示例，我们可以清晰地了解如何使用CSS自定义属性实现骨架屏的效果。