骨架屏背后的强大功能：使用 CSS 自定义属性点亮用户体验

前端

2024-01-08 08:05:50

导言

在当今快节奏的数字世界中，用户对即时加载和流畅体验的期望越来越高。为满足这种需求，开发人员采用了各种技术，包括骨架屏，以改善用户界面在加载过程中的呈现方式。

骨架屏是占位符内容，在实际内容加载之前显示，它为用户提供了一种视觉提示，表明页面正在加载中，同时防止页面内容出现突然的、分散注意力的变化。实现骨架屏的方法有很多，而使用 CSS 自定义属性是一种强大且灵活的方法。

CSS 自定义属性：骨架屏的基石

CSS 自定义属性，也称为变量，允许开发人员定义可跨元素、类或整个文档复用的可重用值。它们以 -- 前缀开头，例如：--primary-color。

在骨架屏上下文中，自定义属性可用于设置骨架屏的样式，例如背景色、宽度和高度。这提供了极大的灵活性，因为开发人员可以轻松地通过修改自定义属性的值来调整骨架屏的外观。

使用自定义属性创建骨架屏

以下步骤概述了如何使用 CSS 自定义属性创建骨架屏：

定义自定义属性： 首先，在 CSS 文件中定义自定义属性，例如：

:root {
  --skeleton-color: #F5F5F5;
  --skeleton-width: 300px;
  --skeleton-height: 150px;
}

应用自定义属性： 接下来，将自定义属性应用到骨架屏元素中。可以使用以下 HTML 代码：

<div class="skeleton">
  <!-- 使用自定义属性设置样式 -->
</div>

设置骨架屏样式： 最后，使用自定义属性设置骨架屏的样式。例如：

.skeleton {
  background-color: var(--skeleton-color);
  width: var(--skeleton-width);
  height: var(--skeleton-height);
}

示例：实现一个动态骨架屏

为了展示自定义属性的灵活性，我们创建一个动态骨架屏，其大小会根据内容加载情况而调整。

<div class="skeleton-container">
  <div class="skeleton-text">正在加载文本...</div>
  <div class="skeleton-image">正在加载图片...</div>
</div>

.skeleton-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.skeleton {
  background-color: var(--skeleton-color);
  width: 100%;
  height: 200px;
  animation: pulse 1s infinite alternate;
}

.skeleton-text {
  width: 80%;
}

.skeleton-image {
  width: 60%;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}