css+html实现Skeleton Screen 加载占位图动画效果（带动画）

请稍等，我会提供完整的攻略。

什么是Skeleton Screen？

Skeleton Screen也叫骨架屏，是指在页面加载过程中，用灰色的占位图代替正在加载的内容，让用户感受到页面正在加载的过程，从而提升页面的整体用户体验。

实现Skeleton Screen的步骤

第一步：HTML

首先，在HTML中将网页内容用占位符代替，这里举一个网站导航栏的例子：

<ul class="skeleton">
  <li class="skeleton-item"></li>
  <li class="skeleton-item"></li>
  <li class="skeleton-item"></li>
  <li class="skeleton-item"></li>
</ul>

以上代码表示一个包含四个li元素的无序列表，其样式名均为"skeleton-item"。通过将导航栏内容使用占位符代替，就可以达到Skeleton Screen的效果。

第二步：CSS

接下来就是给占位符添加CSS样式，使其达到动态效果。这里用到了CSS3的animation属性来实现。

@keyframes skeleton-animation {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f7f7f7;
    overflow: hidden;
}

.skeleton-item {
    height: 100%;
    width: 25%;
    float: left;
    background: linear-gradient(to right, #f7f7f7 0%, #d8d8d8 20%, #f7f7f7 40%);
    background-size: 400px 100%; 
    animation: skeleton-animation 1.5s ease-in-out infinite;
}

解析一下上面的代码：
- 首先定义了一个关键帧动画，将背景图片的初始位置设置为-400px，最终位置设置为400px，通过持续时间设置为1.5秒实现动态效果。
- 将ul元素的样式设置为一般的列表样式，并指定了背景颜色。
- 将li元素的样式设置为25%的宽度，通过线性渐变的背景色以及translatex属性和动画效果，实现了占位图的效果。

第三步：JS

在页面加载完成后，还需要将占位符的CSS样式清除掉，从而显示页面真正的内容。这里可以用到jQuery库来实现。

$(document).ready(function() {
  $('.skeleton').removeClass('skeleton');
});

以上代码表示在文档加载完成之后，将所有类名为"skeleton"的元素的样式名移除。

示例

下面提供两个示例，分别是页面底部的占位图和商品列表的占位图。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Skeleton Screen Demo</title>
  <style>
    @keyframes skeleton-animation {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }

    .skeleton {
      height: 40px;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #f7f7f7;
      overflow: hidden;
    }

    .skeleton-item {
      height: 100%;
      width: 25%;
      float: left;
      background: linear-gradient(to right, #f7f7f7 0%, #d8d8d8 20%, #f7f7f7 40%);
      background-size: 400px 100%;
      animation: skeleton-animation 1.5s ease-in-out infinite;
    }

    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 50px;
      width: 100%;
      background: #f7f7f7;
      z-index: 999;
    }

    .footer-content {
      display: flex;
      justify-content: space-around;
    }

    .footer-item {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .footer-item i {
      font-size: 24px;
      color: #999;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.skeleton').removeClass('skeleton');
    });
  </script>
</head>

<body>
  <div class="footer skeleton">
    <div class="footer-content">
      <div class="footer-item"><i class="fa fa-home"></i></div>
      <div class="footer-item"><i class="fa fa-search"></i></div>
      <div class="footer-item"><i class="fa fa-shopping-cart"></i></div>
      <div class="footer-item"><i class="fa fa-user"></i></div>
    </div>
  </div>

  <ul class="skeleton">
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
    <li class="skeleton-item"></li>
  </ul>
</body>

</html>

通过上面的示例代码，即可实现页面底部导航栏和商品列表动态加载占位图的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css+html实现Skeleton Screen 加载占位图动画效果（带动画） - Python技术站