原文: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. 【JAVA高级】——myEclipse连接mysql启动数据库服务

    背景: DRP项目要求使用Oracle数据库,但眼下因为种种原因,临时还装不了Oracle.但也不能闲着啊,就拿mysql来试试.安装完mysql以后,使用myEclipse连接数据库,就一直报错,报 ...

  2. SqlServer表EXCEL数据复制的另一种方法

    一个.SqlServer表中的数据复制到excel 1.新建查询,用sql语句把表数据读出来 2.然后,选择数据,右键.复制(也能够点击连同标题复制),拷贝到记事本中(不然会乱码) 3.然后再把记事本 ...

  3. 004串重量 (keep it up)

    设计算法并写出代码移除字符串中反复的字符,不能使用额外的缓存空间. 注意: 能够使用额外的一个或两个变量,但不同意额外再开一个数组拷贝. 简单题直接上代码: #include <stdio.h& ...

  4. sizeClass和autolayout学习资源整理

    sizeClass和autolayout,看来不得不開始放弃frame的写法,收集点资料集中学习下 Adaptivity User Interfaces苹果官方文档:https://developer ...

  5. 《图书管理系统——java》

    /* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名:    < ...

  6. BackGroundWorker使用总结

    方法: backgroundWorker1.CancelAsync() 用于取消异步执行 backgroundWorker1.ReportProgress(int ,object)用于向主线层报告进度 ...

  7. [LeetCode169]Majority Element求一个数组中出现次数大于n/2的数

    题目: Given an array of size n, find the majority element. The majority element is the element that ap ...

  8. PowerCmd（转）

    PowerCmd 是一款Windows CMD 的增强工具,可以比普通CMD工具提供更多选项,例如: 1.多窗口集成,再也不见满屏的Cmd窗口: 2.命令日志记录,再也不怕命令滚动多快,有多少,我们都 ...

  9. 【工具】JAVA 在单元读取文件并比较

    package test20140709; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; ...

  10. Intent用法

    Intent是android系统中的最佳男主角,Intent翻译成中文的意思是"意图",说白了就是"我想要...",也就是说眼下运行中的Activity想要请其 ...