使用 CSS 构建像素完美的骨架加载器🚀

骨架加载器在现代网站/应用程序中非常普遍地用于指示数据加载，而不是使用传统的加载器、旋转器等，这些加载器、旋转器等很无聊并且会导致糟糕的用户体验😵‍💫

我创建本教程是为了分享我的知识，关于如何创建一个完美的骨架屏幕，它看起来像原始元素的精确复制品😉

我们将把美食博客卡转换为它自己的骨架加载器，如下面的 GIF 所示🖼️

骨架加载器预览演示

创建完美的骨架屏幕只需3 个步骤🤘

步骤1：

确保您已实现原始元素的 HTML 和 CSS。在本例中，我已在下方添加了美食博客卡片的代码。

HTML 代码⬇️

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="container">
      <div class="card">
        <div class="img-cont">
          <img
            class="img"
            src="https://images.unsplash.com/photo-1594398028856-f253a046f417?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80"
            alt="Food image"
          />
        </div>
        <div class="user-info">
          <div class="user-avatar-cont">
            <img
              src="https://i.ibb.co/JzNYHV9/image-1.jpg"
              alt="User Image"
              class="user-avatar-img"
            />
          </div>
          <div class="user-details">
            <div class="user-name"><span>Natalia Rodrigues</span></div>
            <div class="user-profession"><span>Food Blogger</span></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS代码⬇️

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        font-size: 62.5%;
      }

      body {
        font-family: 'Source Sans Pro', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #eee;
      }

      .card {
        background: #fff;
        position: relative;
        padding: 2rem;
        border-radius: 5px;
        box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
        width: 45rem;
        overflow: hidden;
      }

      .img-cont {
        height: 30rem;
        margin-bottom: 2rem;
        border-radius: 5px;
        overflow: hidden;
      }

      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .user-info {
        display: flex;
        align-items: center;
      }

      .user-avatar-cont {
        width: 6rem;
        height: 6rem;
        margin-right: 2rem;
        border-radius: 50rem;
        overflow: hidden;
      }

      .user-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .user-details {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .user-name {
        font-size: 2.2rem;
        margin-bottom: 5px;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
      }

      .user-profession {
        font-size: 1.3rem;
        color: #999;
        border-radius: 2px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
      }

结果⬇️

第2步：

现在，我们需要将卡片转换为它自己的 Skeleton 版本。为此，我将在 HTML div 上添加一个名为card--skeleton的额外类，其类名为card，如下所示，以便我们能够定位卡片内的元素。

      <div class="card card--skeleton">

现在，卡片里有两张图片，第一张图片是披萨的图片，第二张图片是人物的图片。这两张图片都被包裹在各自的容器中，每个容器都有各自的高度。

现在，我们将删除这两张图片。

    <div class="card">
      <div class="img-cont">
        <!-- Removed Image -->
      </div>
      <div class="user-info">
        <div class="user-avatar-cont">
          <!-- Removed Image -->
        </div>
        <div class="user-details">
          <div class="user-name"><span>Natalia Rodrigues</span></div>
          <div class="user-profession"><span>Food Blogger</span></div>
        </div>
      </div>
    </div>

我们将使用骨架类为图像容器添加背景颜色，如下所示。

.card--skeleton .img-cont {
  background: #eee;
}

.card--skeleton .user-avatar-cont {
  background: #eee;
}

所以最终结果将如下所示⬇️

我们将对“用户名”和“用户职业”元素执行相同的操作。我们将更改这两个元素的背景颜色以及其中的文本颜色。背景颜色和文本颜色将保持不变。
我还添加了一些可选的边框半径。

.card--skeleton .user-name span,
.card--skeleton .user-profession span {
  background: #eee;
  color: #eee;
  border-radius: 5px;
}

现在，最终结果将如下所示⬇️

看起来很酷，对吧？😉

所以，现在我们可以进入第三步，添加闪光效果动画⚡

步骤3：

在这一步中，我们将在整个骨架卡上添加闪光效果动画。

为了实现这一点，我们将针对card-skeleton之前的sudo 类，如下所示。

      .card--skeleton::before {
        content: '';
        position: absolute;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.9),
          transparent
        );
        width: 50%;
        height: 100%;
        top: 0;
        left: 0;
      }

因此，我们添加了前置sudo 元素，该元素绝对定位，具有与card-skeleton相同的高度，并且具有class--skeleton宽度的50% 。

我们还添加了线性渐变作为背景，并在正确的方向上具有 3 种颜色（透明色、白色、透明色）。

因此，我们的卡片骨架将看起来像这样⬇️

现在我们将使用 CSS关键帧将渐变从左侧移动到右侧。在关键帧中，我们将使用transform属性来倾斜元素（基本上就是将线性渐变从|变为/ ），并在 X 方向上平移它。

我已经为卡片元素添加了overflow: hidden值，因此当之前的元素由于关键帧变换而超出卡片边界时，它将不会在卡片边界之外可见，而这正是我们所需要的。

      @keyframes loading {
        0% {
          transform: skewX(-10deg) translateX(-100%);
        }
        100% {
          transform: skewX(-10deg) translateX(200%);
        }
      }

      .card--skeleton::before {
        ...
        /* Refer the Keyframe inside the Animation */
        animation: loading 0.6s infinite;
      }

所以，最终结果将如下所示⬇️

这就是我们想要的🥳🤘
我希望你觉得这篇文章有帮助，谢谢你阅读它😇

重要😸

我会定期在领英和推特上发布与Web 开发和编程相关的实用内容。您可以考虑在这些平台上与我联系或关注我。

Linkedin 个人资料, Twitter 个人资料

附言✌️

我最近创建了一个开源项目，这是一个面向开发人员的投资组合网站模板，名为Dopefolio ，并在dev.to上撰写了一篇关于它的文章。

请随意查看此处的文章😄

请用❤️+🦄+🔖来回应，因为创建这样的内容需要时间，所以如果你对这篇文章表现出一些喜爱，将会非常有帮助。

通过下面的评论分享您的反馈💬

关注我，获取更多与Web 开发和编程相关的精彩内容🙌

谢谢大家的支持❤️

文章来源：https://dev.to/rammcodes/build-pixel-perfect-sculpture-loader-using-css-5692