弹跳加载器

剑若成风

于 2020-03-07 21:30:46 发布

阅读量135

点赞数 1

分类专栏： CSS 文章标签： animation

原文链接：https://www.30secondsofcode.org/css/s/bouncing-loader/

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个弹跳加载器动画。

注意：1rem通常是16px。

@keyframes定义一个动画，具有两个状态，元素使用opacity改变透明度，使用transform: translate3d()在 2D 平面上平移。在transform: translate3d()上使用单轴平移可提高动画的性能。
.bouncing-loader是弹跳圆的父容器，使用display: flex和justify-content: center将其放置在中心。
.bouncing-loader > div，以要设置样式的父级的三个子div为目标。div给定宽度和高度1rem，使用border-radius: 50%从方形转成圆。
margin: 3rem 0.2rem指定每个圆的上/下边距为3rem，左/右边距为0.2rem，使得它们不会彼此直接接触，给它们提供了一些间隔。
animation是对于各种动画属性的简略属性：animation-name，animation-duration，animation-iteration-count，animation-direction。
nth-child(n)定位为元素的第 n 个子元素。
animation-delay分别在第二个和第三个div上使用，因此每个元素不会同时启动动画。

浏览器支持

100.0%

https://caniuse.com/#feat=css-animation

预览

可在 CodePen 中预览

HTML

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

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}

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