原文:2款不同样式的CSS3 Loading加载动画 附源码

我们经常看到的Loading加载很多都是转圈圈的那种，今天我们来换一种有创意的CSS3 Loading加载动画，一种是声波形状的动画，另一种是折线弯曲的动画，它们实现起来也非常简单，先来看看效果图：

看起来还挺特别的吧。。

另外你也可以在这里看到这个Loading动画的DEMO演示

接下来我们来看看如何用CSS3来实现这2款特别的Loading动画的。

首先是HTML代码，构造了2个Loading容器：

这是第一个：

<div style="height:80px;"></div>

<!--colorful pulse-->

<div id="colorfulPulse">

  <span class="item-1"></span>

  <span class="item-2"></span>

  <span class="item-3"></span>

  <span class="item-4"></span>

  <span class="item-5"></span>

  <span class="item-6"></span>

  <span class="item-7"></span>

</div>

这是第二个：

<div style="height:80px;"></div>

<!--pulse wave-->

<div id="container">

  <div class="stick"></div>

  <div class="stick"></div>

  <div class="stick"></div>

  <div class="stick"></div>

  <div class="stick"></div>

  <div class="stick"></div>

  <h1>Loading...</h1>

</div>

接下来就是核心CSS3代码，对于第一个，先是定义了7条竖线，然后对每条竖线应用名为scale的动画：

#colorfulPulse span {

  display: inline-block;

  width: 10px;

  height: 40px;

  animation-name: scale;

  -webkit-animation-name: scale;

  -moz-animation-name: scale;

  -ms-animation-name: scale;

  -o-animation-name: scale;

  animation-duration: 1.2s;

  -webkit-animation-duration: 1.2s;

  -moz-animation-duration: 1.2s;

  -ms-animation-duration: 1.2s;

  -o-animation-duration: 1.2s;

  animation-iteration-count: infinite;

  -webkit-animation-iteration-count: infinite;

  -moz-animation-iteration-count: infinite;

  -ms-animation-iteration-count: infinite;

  -o-animation-iteration-count: infinite;

}

span.item-1 {

  background: #2ecc71;

}

span.item-2 {

  background: #3498db;

}

span.item-3 {

  background: #9b59b6;

}

span.item-4 {

  background: #e67e22;

}

span.item-5 {

  background: #c0392b;

}

span.item-6 {

  background: #e74c3c;

}

span.item-7 {

  background: #e74c8c;

}

.item-1 {

  animation-delay: -1s;

  -webkit-animation-delay: -1s;

  -moz-animation-delay: -1s;

  -ms-animation-delay: -1s;

  -o-animation-delay: -1s;

}

.item-2 {

  animation-delay: -0.9s;

  -webkit-animation-delay: -0.9s;

  -moz-animation-delay: -0.9s;

  -ms-animation-delay: -0.9s;

  -o-animation-delay: -0.9s;

}

.item-3 {

  animation-delay: -0.8s;

  -webkit-animation-delay: -0.8s;

  -moz-animation-delay: -0.8s;

  -ms-animation-delay: -0.8s;

  -o-animation-delay: -0.8s;

}

.item-4 {

  animation-delay: -0.7s;

  -webkit-animation-delay: -0.7s;

  -moz-animation-delay: -0.7s;

  -ms-animation-delay: -0.7s;

  -o-animation-delay: -0.7s;

}

.item-5 {

  animation-delay: -0.6s;

  -webkit-animation-delay: -0.6s;

  -moz-animation-delay: -0.6s;

  -ms-animation-delay: -0.6s;

  -o-animation-delay: -0.6s;

}

.item-6 {

  animation-delay: -0.5s;

  -webkit-animation-delay: -0.5s;

  -moz-animation-delay: -0.5s;

  -ms-animation-delay: -0.5s;

  -o-animation-delay: -0.5s;

}

.item-7 {

  animation-delay: -0.4s;

  -webkit-animation-delay: -0.4s;

  -moz-animation-delay: -0.4s;

  -ms-animation-delay: -0.4s;

  -o-animation-delay: -0.4s;

}

@-webkit-keyframes scale {

  0%, 40%, 100% {

    -moz-transform: scaleY(0.2);

    -ms-transform: scaleY(0.2);

    -o-transform: scaleY(0.2);

    -webkit-transform: scaleY(0.2);

    transform: scaleY(0.2);

  }

  20%, 60% {

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

  }

}

@-moz-keyframes scale {

  0%, 40%, 100% {

    -moz-transform: scaleY(0.2);

    -ms-transform: scaleY(0.2);

    -o-transform: scaleY(0.2);

    -webkit-transform: scaleY(0.2);

    transform: scaleY(0.2);

  }

  20%, 60% {

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

  }

}

@-ms-keyframes scale {

  0%, 40%, 100% {

    -moz-transform: scaleY(0.2);

    -ms-transform: scaleY(0.2);

    -o-transform: scaleY(0.2);

    -webkit-transform: scaleY(0.2);

    transform: scaleY(0.2);

  }

  20%, 60% {

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

  }

}

@keyframes scale {

  0%, 40%, 100% {

    -moz-transform: scaleY(0.2);

    -ms-transform: scaleY(0.2);

    -o-transform: scaleY(0.2);

    -webkit-transform: scaleY(0.2);

    transform: scaleY(0.2);

  }

  20%, 60% {

    -moz-transform: scaleY(1);

    -ms-transform: scaleY(1);

    -o-transform: scaleY(1);

    -webkit-transform: scaleY(1);

    transform: scaleY(1);

  }

}

对于第二个Loading动画，也是定义了6条横线，对3条应用名为rise的动画，对另外3条应用名为fall的动画，另外对Loading文字应用名为fade的动画，从而达到波浪形的效果，具体CSS代码如下：

.stick:nth-child(n) {

  transform: rotate(30deg);

  -ms-transform: rotate(30deg);

  /* IE 9 */

  -webkit-transform: rotate(30deg);

  /* Safari and Chrome */

  -moz-transform: rotate(30deg);

  -webkit-animation: fall 2s infinite;

  -moz-animation: fall 2s infinite;

}

.stick:nth-child(2n) {

  transform: rotate(-30deg);

  -ms-transform: rotate(-30deg);

  /* IE 9 */

  -webkit-transform: rotate(-30deg);

  /* Safari and Chrome */

  -moz-transform: rotate(-30deg);

  -webkit-animation: rise 2s infinite;

  -moz-animation: rise 2s infinite;

}

@-webkit-keyframes rise {

  50% {

    transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    /* IE 9 */

    -webkit-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

  }

}

@-moz-keyframes rise {

  50% {

    transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    /* IE 9 */

    -webkit-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

  }

}

@-o-keyframes rise {

  50% {

    transform: rotate(30deg);

    -ms-transform: rotate(30deg);

    /* IE 9 */

    -webkit-transform: rotate(30deg);

    -moz-transform: rotate(30deg);

  }

  @keyframes rise {

    50% {

      transform: rotate(30deg);

      -ms-transform: rotate(30deg);

      /* IE 9 */

      -webkit-transform: rotate(30deg);

      -moz-transform: rotate(30deg);

    }

  }

}

@-webkit-keyframes fall {

  50% {

    transform: rotate(-30deg);

    -ms-transform: rotate(-30deg);

    /* IE 9 */

    -webkit-transform: rotate(-30deg);

    -moz-transform: rotate(30deg);

  }

}

@-moz-keyframes fall {

  50% {

    transform: rotate(-30deg);

    -ms-transform: rotate(-30deg);

    /* IE 9 */

    -webkit-transform: rotate(-30deg);

    -moz-transform: rotate(-30deg);

  }

}

@-o-keyframes fall {

  50% {

    transform: rotate(-30deg);

    -ms-transform: rotate(-30deg);

    /* IE 9 */

    -webkit-transform: rotate(-30deg);

    -moz-transform: rotate(30deg);

  }

  @keyframes fall {

    50% {

      transform: rotate(-30deg);

      -ms-transform: rotate(-30deg);

      /* IE 9 */

      -webkit-transform: rotate(-30deg);

      -moz-transform: rotate(30deg);

    }

  }

}

@-webkit-keyframes fade {

  50% {

    opacity: 0.5;

  }

  100% {

    opacity:;

  }

}

@-moz-keyframes fade {

  50% {

    opacity: 0.5;

  }

  100% {

    opacity:;

  }

}

@-o-keyframes fade {

  50% {

    opacity: 0.5;

  }

  100% {

    opacity:;

  }

  @keyframes fade {

    50% {

      opacity: 0.5;

    }

    100% {

      opacity:;

    }

  }

}

这样我们就完成了这个Loading动画，最后分享一下源代码，下载地址>>

最新文章

  1. iOS开发之使用Runtime给Model类赋值
  2. Yes, Virginia, Scala is hard
  3. HDU 4507 (鬼畜级别的数位DP）
  4. CSS 强制换行和禁止换行学习
  5. Thinkphp整合最新Ueditor编辑器
  6. python实现登录函数，比较简单
  7. Lua编译
  8. Office 2013 正式版 下载地址 带正版验证
  9. Linux开机启动(bootstrap)上
  10. C#在PDF中如何以不同颜色高亮文本
  11. Springboot 系列（十二）使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件
  12. 记一个centos分区大小调整过程
  13. Win强制删除文件windows批处理强行删除文件
  14. chown语法
  15. C-Language Functions
  16. 微信小程序--数据存储
  17. SSL及其加密通信过程
  18. win-Linux文件脚本迁移过程中的问题 syntax error: unexpected end of file
  19. Python——ipython（python programming）
  20. “秘书九段的故事”，要学会给自己制定一个工作N段或者技术N段

热门文章

  1. Android4.4 Framework分析——Zygote进程的启动过程
  2. 加入指数（IOS开发）
  3. 初识google多语言通信框架gRPC系列（四）C++中使用gRPC
  4. tshark命令行的使用（转）
  5. 重新想象 Windows 8 Store Apps (30) - 信息: 获取包信息, 系统信息, 硬件信息, PnP信息, 常用设备信息
  6. Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程
  7. Visual Studio 使用及调试必知必会
  8. Xcode 6 AutoLayout Size Classes
  9. Android应用开发：LoaderManager在Activity/Fragment中的使用分析
  10. iPhone&amp;amp;iPad DFU及恢复模式刷机、降级教程