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

使用CSS自定义属性可以实现骨架屏效果，使页面在加载过程中展示一个简单的占位符，提高用户体验。

1. CSS自定义属性

CSS自定义属性是用来保存一些可以在多处使用的值的变量，其语法如下：

element {
  --variable-name: value;
}

其中element是指应用了该变量的元素，--variable-name表示自定义变量的名称，value表示自定义变量的值。在其他位置调用时，使用var()函数即可，如：

element {
  property: var(--variable-name);
}

2. 骨架屏效果实现步骤

步骤一：定义骨架屏样式

首先，我们需要定义一个骨架屏样式，在这个样式中，我们使用了CSS自定义属性实现简单的灰色占位符。

.skeleton {
  background: #f6f7f8;
  border-radius: 4px;
  display: inline-block;
  height: var(--height, 16px);
  width: var(--width, 100%);
}

在这个样式中，我们定义了以下自定义属性：

• --height：占位符的高度，默认为16px。
• --width：占位符的宽度，默认为100%。

步骤二：应用骨架屏样式

接下来，我们需要应用骨架屏样式到具体的元素上。这里有两种方法：

方法一：手动应用样式

我们可以手动在HTML中添加骨架屏样式。

<div class="skeleton" style="--height: 20px;"></div>

这里我们手动指定--height自定义属性的值为20px，实现了一个高度为20px的占位符。

方法二：自动应用样式

我们可以使用JavaScript代码自动应用骨架屏样式。下面是一个使用jQuery库实现的示例代码：

$(document).ready(function() {
  $(".skeleton").each(function() {
    $(this).css({
      "--height": $(this).height() + "px",
      "--width": $(this).width() + "px"
    });
  });
});

在这个示例中，我们遍历了所有类名为skeleton的元素，自动获取了它们的实际高度和宽度，并将值作为--height和--width自定义属性的值，实现了动态的骨架屏效果。

3. 示例说明

示例一：文章列表

下面是一个简单的文章列表示例，使用骨架屏效果展示了文章列表的样式。点击这里查看在线示例。

<div class="article-list">
  <div class="article-item">
    <div class="skeleton" style="--height: 20px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
  </div>
  <div class="article-item">
    <div class="skeleton" style="--height: 20px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
  </div>
</div>

示例二：用户列表

下面是一个用户列表示例，使用骨架屏效果展示了用户列表的样式。点击这里查看在线示例。

<div class="user-list">
  <div class="user-item">
    <div class="skeleton" style="--width: 64px; --height: 64px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
  </div>
  <div class="user-item">
    <div class="skeleton" style="--width: 64px; --height: 64px;"></div>
    <div class="skeleton" style="--height: 16px; margin-top: 8px;"></div>
  </div>
</div>

在这两个示例中，我们都使用了CSS自定义属性实现了简单的灰色占位符。此外，我们还手动或自动指定了--height和--width自定义属性的值，实现了不同高度和宽度的占位符。