大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 打造一个极简的列表块加载动效。

最新文章通过公众号「设计师工作日常」发布。

目录

整体效果

有趣的css - 列表块加载动效_用户体验

💎知识点：
1️⃣ animation 动画
2️⃣ flex 布局
3️⃣ opacity 透明属性

🔑思路：
写好列表块整体布局，然后利用不同的动画时长调整变化透明度，来实现视觉上的列表正在加载的效果。

适用于 app 列表加载延迟等页面场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="list-box70">
  <div class="pic70"></div>
  <div class="list70">
    <span class="span70"></span>
    <div class="span-div70">
      <span class="span701"></span>
      <span class="span702"></span>
    </div>
  </div>
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

html 搭建列表块整体布局。

css 部分代码

.list-box70{
  width: 200px;
  height: 76px;
  position: relative;
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  box-sizing: border-box;
}
.pic70{
  width: 44px;
  height: 44px;
  position: relative;
  background-color: #e4e4e4;
  border-radius: 4px;
  animation: eff70 1.8s linear infinite;
}
.list70{
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.span70{
  width: 114px;
  height: 20px;
  position: relative;
  border-radius: 4px;
  background-color: #e4e4e4;
  animation: eff70 2s linear infinite;
}
.span-div70{
  position: relative;
  margin-top: 10px;
  display: flex;
}
.span701,.span702{
  width: 65px;
  height: 14px;
  position: relative;
  border-radius: 4px;
  background-color: #e4e4e4;
  animation: eff70 2.2s linear infinite;
}
.span702{
  width: 39px;
  margin-left: 10px;
  animation: eff70 2.4s linear infinite;
}
@keyframes eff70{
  0%{
    opacity: 0.2;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.2;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.

1、定义整体列表块通用样式，设置一个浅一点的背景色，设置 display: flex 布局。

2、利用 flex 布局，分别写出列表块中的每个小的矩形，并且设置相关的样式颜色等。

3、给列表块里的每个小的矩形设置 animation 动画，并且设置相关参数，每个动画时长递增 0.2s 。

4、设置动画关键帧，定义变化 opacity 透明属性，让列表块中的小的矩形由浅到深循环变化，这样就形成了视觉上列表块内容在加载的效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>列表块加载动效</title>
  </head>
  <body>
    <div class="app">
      <div class="list-box70">
        <div class="pic70"></div>
        <div class="list70">
          <span class="span70"></span>
          <div class="span-div70">
            <span class="span701"></span>
            <span class="span702"></span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-box70{
  width: 200px;
  height: 76px;
  position: relative;
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  box-sizing: border-box;
}
.pic70{
  width: 44px;
  height: 44px;
  position: relative;
  background-color: #e4e4e4;
  border-radius: 4px;
  animation: eff70 1.8s linear infinite;
}
.list70{
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.span70{
  width: 114px;
  height: 20px;
  position: relative;
  border-radius: 4px;
  background-color: #e4e4e4;
  animation: eff70 2s linear infinite;
}
.span-div70{
  position: relative;
  margin-top: 10px;
  display: flex;
}
.span701,.span702{
  width: 65px;
  height: 14px;
  position: relative;
  border-radius: 4px;
  background-color: #e4e4e4;
  animation: eff70 2.2s linear infinite;
}
.span702{
  width: 39px;
  margin-left: 10px;
  animation: eff70 2.4s linear infinite;
}
@keyframes eff70{
  0%{
    opacity: 0.2;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.2;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.

页面渲染效果

有趣的css - 列表块加载动效_用户体验

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

我是 Just，这里是「设计师工作日常」，求点赞求关注！