[译]弹跳loader

30 Seconds of CSS

CSS实用片段 — 30秒一个

代码片段

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bouncing-loader {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0.1;
    transform: translateY(-1rem);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

Explanation

1rem通常是16px

1. @keyframes用来定义动画，元素从两种状态转换，例如opacity、2D位置转换transform: translateY()
2. .bouncing-loader作为loader的包裹容器，使用flex布局，水平方向采用justify-content: center实现内部元素的居中
3. .bouncing-loader > div用来实在三个点的样式，border-radius: 50%使div变圆
4. margin: 3rem 0.2rem使3个点有些间距
5. animation是animation-name、animation-duration、animation-iteration-count、animation-direction属性的简写
6. nth-child(n)用来定位元素是父元素的第几个子元素，注意css的数字是从1开始数的
7. animation-delay设置动画延时，使得3个圆点的动画不同时开启