有趣的css - 列表块加载动效

老K博客

发布于 2024-06-10 13:24:07

810

发布于 2024-06-10 13:24:07

文章被收录于专栏：老K博客老K博客

因为接口问题只能显示静态图片

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。 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、定义整体列表块通用样式，设置一个浅一点的背景色，设置 display: flex 布局。

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

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

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

完整代码如下 html 页面

    列表块加载动效

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;
  }
}