CSS SNIPPET

  返回

弹跳动画载入指示器  动画效果

创建一个弹跳动画的载入指示器。

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;
}
效果演示
代码说明

注: 1rem 通常为16px

  1. @keyframes 定义了一个包含两个状态的动画,元素改变opacity并使用 transform: translate3d()在2D平面改变位置。transform: translate3d() 使用单轴移位可以提高动画的性能。
  2. .bouncing-loader是弹跳园的父容器,使用display: flexjustify-content: center 实现中心定位。
  3. .bouncing-loader > div选中父元素的三个需要改变样式的子div。设置 这些div的宽度和高度为1rem,使用border-radius: 50% 将其从方形变成 原型。
  4. margin: 3rem 0.2rem 声明了每个圆的都有3rem的上下外边距和0.2rem的 左右外边距,这样它们就不会靠在一起,留出呼吸空间。
  5. animation 是多个动画属性的快捷属性,我们使用了animation-name, animation-duration, animation-iteration-count, animation-direction
  6. nth-child(n) 选中父元素的第n个子元素。
  7. animation-delay 分别作用于第2、3个 div,这样各元素就不会同时开始动画。
浏览器支持

100.0%