CSS3波形loading动画特效

这是一款使用CSS3制作的波形loading动画特效。这组波形loading动画特效共有11种波形动画，分别使用不同的CSS3 animation动画来实现。

使用方法

在页面中引入style.css文件。

<link rel="stylesheet" href="style.css" type="text/css">
                

HTML结构

每一个loading动画都是由一个<div>元素包裹10个子<div>元素组成。

<div class="shaft-load">
  <div class="shaft1"></div>
  <div class="shaft2"></div>
  <div class="shaft3"></div>
  <div class="shaft4"></div>
  <div class="shaft5"></div>
  <div class="shaft6"></div>
  <div class="shaft7"></div>
  <div class="shaft8"></div>
  <div class="shaft9"></div>
  <div class="shaft10"></div>
</div>           
                

CSS样式

loading动画的通用样式如下：

[class^="shaft-load"] {
  margin: 50px auto;
  width: 60px;
  height: 30px;
}
[class^="shaft-load"] > div {
  float: left;
  background: #893878;
  height: 100%;
  width: 5px;
  margin-right: 1px;
  display: inline-block;
}                 
                

实现第一种波形动画的CSS样式如下：

[class^="shaft-load"] .shaft1 {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  -o-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
/* Shaft 1 */
.shaft-load > div {
  background-color: #5d8341;
  -webkit-animation: loading 1.5s infinite ease-in-out;
  -moz-animation: loading 1.5s infinite ease-in-out;
  -o-animation: loading 1.5s infinite ease-in-out;
  animation: loading 1.5s infinite ease-in-out;
  -webkit-transform: scaleY(0.05) translateX(-10px);
  -moz-transform: scaleY(0.05) translateX(-10px);
  -ms-transform: scaleY(0.05) translateX(-10px);
  -o-transform: scaleY(0.05) translateX(-10px);
  transform: scaleY(0.05) translateX(-10px);
}

@-webkit-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@-moz-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@-o-keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}
@keyframes loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    -moz-transform: scaleY(1.2) translateX(10px);
    -ms-transform: scaleY(1.2) translateX(10px);
    -o-transform: scaleY(1.2) translateX(10px);
    transform: scaleY(1.2) translateX(10px);
    background-color: #9dc182;
  }
}                 
                

其它loading动画效果请参考下载文件。