2款不同样式的CSS3 Loading加载动画 附源码
原文: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加载动画 附源码的更多相关文章
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 【JavaScript】使用纯JS实现多张图片的懒加载(附源码)
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 原生JS+ CSS3创建loading加载动画;
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- HTML5 五彩圆环Loading加载动画实现教程
原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...
- CSS动画实例:Loading加载动画效果(一)
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
随机推荐
- UML相关工具一览
http://www.cnblogs.com/chehaoj/p/3478003.html TopCoder UML Tool 1.2.6 TopCoder, Inc http://www.topco ...
- Google的Guava它Collection升华
至于Guava这是不是在这里说.一个已被提上一个非常特殊的! 这主要是为了分享Guava对于一些升华处理组.井,不多说了,直接在代码: package com.joyce.guava.bean; /* ...
- extjs的相关属性
通用属性: labelSeparator:''//表示fieldLabel后不会显示冒号":" readOnly:true//仅仅读 focusCls: 'txtHalfInput ...
- 管理Android通信录
Android提供了Contacts应用程序来管理联系人,并且Android系统还为联系人管理提供了ContentProvider,这就同意其他应用程序以ContentResolver来管理联系人数据 ...
- Unbound classpath container: 'JRE System Library [jdk17060]' in project ***
项目报告的错误列表 Unbound classpath container: 'JRE System Library [jdk17060]' in project **** 误. 原因是,我升级JDK ...
- maven学习系列(一)—maven安装和基本设置
maven下载和配置 第一步:下载apache-maven-2.3.2-bin.zip并解压到D:\tools,下载地址http://maven.apache.org/download.cgi 第二步 ...
- Directx11 xnamath.h 报错
xnamath.h 报错: 在标识符“XMConvertToRadians”的前面 如下报错 >d:\program files\microsoft directx sdk (june )\in ...
- Windows 8实例教程系列 - 布局控制
原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...
- 【最小割】HDU 4971 A simple brute force problem.
说是最大权闭合图.... 比赛时没敢写.... 题意 一共同拥有n个任务,m个技术 完毕一个任务可盈利一些钱,学习一个技术要花费钱 完毕某个任务前须要先学习某几个技术 可是可能在学习一个任务前须要学习 ...
- C++学习笔记1--基础知识
#include <iomanip> setpresition(int n); 设置输出精度浮点数是n. [goto声明] goto也被称为无条件分支语句购买勇于改变运行顺序的声明.got ...