原文: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动画，最后分享一下源代码，下载地址>>

2款不同样式的CSS3 Loading加载动画 附源码的更多相关文章

  1. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  2. css制作简单loading动画效果【css3 loading加载动画】

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  3. 【JavaScript】使用纯JS实现多张图片的懒加载（附源码）

    一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...

  4. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  5. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  6. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  7. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  8. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  9. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

随机推荐

  1. jdk并发包 CopyOnWriteArrayList源代码分析

    CopyOnWriteArrayList是jdk1.5并法包里面用于处理高并发下.读多写少的情况下.减少锁等待的集合类.以下对该类实现做一个简要的分析 1,首先CopyOnWriteArrayList ...

  2. 第1周 SQL Server 如何执行一个查询

    原文:第1周 SQL Server 如何执行一个查询 大家好,欢迎来到第1周的SQL Server性能调优培训.在我们进入SQL Server性能调优里枯燥难懂的细节内容之前,我想通过讲解SQL Se ...

  3. Dom4j分解xml

    package cn.com.guju.util; import java.io.ByteArrayInputStream; import java.io.UnsupportedEncodingExc ...

  4. 【原创】leetCodeOj --- Sort List 解题报告

    今日leetcode链表题全制霸 原题地址: https://oj.leetcode.com/problems/sort-list/ 题目内容: Sort List Sort a linked lis ...

  5. .NET API for RabbitMQ and ActiveMQ

    EasyNetQ: .NET API for RabbitMQ: https://github.com/mikehadlow/EasyNetQ/wiki/Quick-Start Or: http:// ...

  6. 基于struct2完整的用户登录

    第一lib在导入struct2相应jar包 在web.xml组态struct2过滤器 <filter> <filter-name>struts2</filter-name ...

  7. ServiceStack.Hello——跨平台.net REST api服务搭建

    ServiceStack.Hello--跨平台.net REST api服务搭建 自己创建: https://github.com/ServiceStack/ServiceStack/wiki/Cre ...

  8. linux 下一个 osw先从操作系统和标准脚本主动发起

    linux 下一个 osw与操作系统的引导和启动标准的脚本.osw它指的是--os watcher,这是一个显示器os这些指标shell脚本.osw监测数据一般使用oracle技能评估os资源的使用, ...

  9. 11gR2 Database Services for &quot;Policy&quot; and &quot;Administrator&quot; Managed Databases (文件 ID 1481647.1)

    In this Document   _afrLoop=1459311711568804&id=1481647.1&displayIndex=6&_afrWindowMode= ...

  10. 事件冒泡 ，停止事件冒泡 e.stopPropagation()

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>防止起泡 ...