2种不可思议的纯CSS3 loading加载动画特效

这是一款共2种炫酷效果的纯CSS3 loading加载动画特效。该CSS3加载动画分别为弹跳的小方块和月亮绕地球旋转的动画效果。它们使用的技术都是CSS animation来实现，效果非常的震撼。

制作方法

HTML结构

该CSS3加载动画特效的HTML结构使用的是<div>的嵌套结构。

<div class='demo-container'>
  <!--小方块弹跳效果-->
  <div class='demo-panel bg1'>
    <div class='spinner'>
      <div class='bouncer'></div>
    </div>
  </div>
  <!--月亮绕地球旋转效果-->
  <div class='demo-panel bg2'>
    <div class='spinner'>
      <div class='orbiter'>
        <div class='planet'></div>
        <div class='orbit-outer'>
          <div class='orbit-inner'>
            <div class='dot'></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

CSS样式

在DEMO中的布局使用的是CSS flex布局。

.demo-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 60vh;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-container .demo-panel {
  -webkit-flex-grow: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}                
              

小方块的弹跳动画使用了两组bounce帧动画，分别对应小方块上升和下降时的动画效果。animation被设置为无限循环模式，并且指定了easing效果。

.bouncer {
  width: 30px;
  height: 10px;
  position: absolute;
  background: white;
  left: 35%;
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
    bottom: 0%;
    height: 20px;
  }
  4% {
    height: 5px;
  }
  5% {
    height: 30px;
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
  }
  20% {
    height: 20px;
    bottom: 50%;
    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
  }
  45% {
    height: 20px;
    bottom: 0%;
  }
  49% {
    height: 5px;
  }
  50% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
    /* height: $h + 60; */
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
  }
  75% {
    height: 20px;
    bottom: 100%;
    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
    height: 20px;
    bottom: 0%;
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
    bottom: 0%;
    height: 20px;
  }
  4% {
    height: 5px;
  }
  5% {
    height: 30px;
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
  }
  20% {
    height: 20px;
    bottom: 50%;
    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
  }
  45% {
    height: 20px;
    bottom: 0%;
  }
  49% {
    height: 5px;
  }
  50% {
    -webkit-transform: rotate(0turn);
            transform: rotate(0turn);
    /* height: $h + 60; */
    bottom: 0%;
    -webkit-animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
    animation-timing-function: cubic-bezier(0, 0.62, 0.42, 1);
  }
  75% {
    height: 20px;
    bottom: 100%;
    -webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
    animation-timing-function: cubic-bezier(0.57, 0.01, 0.98, 0.47);
  }
  100% {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
    height: 20px;
    bottom: 0%;
  }
}