原文: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: 1;}
}
@-moz-keyframes fade {50% {opacity: 0.5;}100% {opacity: 1;}
}
@-o-keyframes fade {50% {opacity: 0.5;}100% {opacity: 1;}@keyframes fade {50% {opacity: 0.5;}100% {opacity: 1;}}
}

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

2款不同样式的CSS3 Loading加载动画 附源码相关推荐

  1. 150款+炫酷的CSS3 loading加载动画，总有一款适合你

    是不是非常有趣? 最后,附上150款+CSS3 loading加载动画的下载地址: 下载地址: https://pan.baidu.com/s/1upupoPpI0KDrK1lk_m4MmA 提取码: ...

  2. 【web素材】09—150款+炫酷的CSS3 loading加载动画，总有一款适合你

    整理 | 杨小爱 我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...

  3. html加载特效大全,10种炫酷的CSS3 loading加载动画特效

    这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...

  4. VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码

    解决有两步: 1.采用渐进式加载:原图未加载完时显示比它内存小的模糊图: 2.采用懒加载:只加载可视区域的图片,即滚动到可视区域时再加载图片 vue-lazyload-img:VUE图片懒加载插件 v ...

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

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

  6. html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效

    这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...

  7. css动画----loading加载动画

    今天做项目的时候,一个loading加载动画,让我搞了很长时间,后来ui给了看了一个loading加载源码,仿照着源码,把样式改了一下,成功了,并且通过ui给的链接,发现里面有很多优秀的源码可以借鉴, ...

  8. Css3+jquery 实现loading加载动画

    一.Css3+jquery 实现loading加载动画 这是一个 Loading 加载demo 不需要图片 纯html和css 实现样式 以下是html css以及js的代码 需要自取 <!DO ...

  9. 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...

最新文章

  1. C# 在异步中使用HttpWebRequest出现的“正在终止线程”错误的解决方案
  2. 有条件截取字符串_Python小课堂之木辛老师特别讲解：再次深入浅出字符串的格式化...
  3. python爬虫小说代码示例-Python从零开始写爬虫-4 解析HTML获取小说正文
  4. 性能相差极大的SQL语句
  5. apache php的日志在哪里,PHP在哪里存储错误日志？ （php5，apache，fastcgi，cpanel）...
  6. AD7606实际采样率输出数据量偏小
  7. jQuery Post
  8. Android模块化之MicroModule（微信Pins工程） 1
  9. 有佳文档管理v2.03
  10. 区块链 Fisco bcos 智能合约（18）-FISCO BCOS的速度与激情：性能优化方案最全解密
  11. python人工智能小程序_推荐几款“真”人工智能技术小程序
  12. 小米8se线刷机（卡刷机一般解决不了问题，所以不用卡刷）
  13. （Spring+SpringMVC+mybatis）SSM企业职工工资管理系统
  14. u盘怎样修复服务器系统,高手教你怎么修复U盘的MBR
  15. 耐心看完，越到后面越精彩
  16. 如何做好互联网广告销售
  17. CSAPP:archlab
  18. 2022华为杯E题思路分析
  19. Edge浏览器检查更新时出错: 无法创建该组件(错误代码 3: 0x80004002 -- system level)如何更新
  20. 1671. Anansi's Cobweb（并查集）

热门文章

  1. f5申请并激活License
  2. luoguP2479 [SDOI2010]捉迷藏
  3. Tomcat服务器端口的配置
  4. RDS用户如何优化报警规则
  5. [20180408]那些函数索引适合字段的查询.txt
  6. websphere部署项目报Result Maps collection already contains value for XXX
  7. 第7章 面向对象编程（OOP） 《Kotin 编程思想·实战》
  8. 最短路径问题 java实现 源代码
  9. JAVA学习笔记--4.多线程编程 part1.背景知识和内存模型
  10. sql server 数据库备份方案