使用 CSS3 实现超炫的 Loading（加载）动画效果

　　SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）

您可能感兴趣的相关文章

Loading 动画效果一

div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner9 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner9 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner9 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.spinner9 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
-->

HTML 代码：

<div class="spinner">

  <div class="rect1"></div>

  <div class="rect2"></div>

  <div class="rect3"></div>

  <div class="rect4"></div>

  <div class="rect5"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 50px;

  height: 60px;

  text-align: center;

  font-size: 10px;

}

.spinner > div {

  background-color: #67CF22;

  height: 100%;

  width: 6px;

  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

  animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

.spinner .rect3 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

.spinner .rect4 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

.spinner .rect5 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

  20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

  0%, 40%, 100% {

    transform: scaleY(0.4);

    -webkit-transform: scaleY(0.4);

  }  20% {

    transform: scaleY(1.0);

    -webkit-transform: scaleY(1.0);

  }

}

Loading 动画效果二

HTML 代码：

<div class="spinner"></div>

CSS 代码：

.spinner {

  width: 60px;

  height: 60px;

  background-color: #67CF22;

  margin: 100px auto;

  -webkit-animation: rotateplane 1.2s infinite ease-in-out;

  animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

  0% { -webkit-transform: perspective(120px) }

  50% { -webkit-transform: perspective(120px) rotateY(180deg) }

  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}

@keyframes rotateplane {

  0% {

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

  } 50% {

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

  } 100% {

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}

Loading 动画效果三

HTML 代码：

<div class="spinner">

  <div class="double-bounce1"></div>

  <div class="double-bounce2"></div>

</div>

CSS 代码：

.spinner {

  width: 60px;

  height: 60px;

  position: relative;

  margin: 100px auto;

}

.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #67CF22;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

  0%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

Loading 动画效果四

HTML 代码：

<div class="spinner">

  <div class="cube1"></div>

  <div class="cube2"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 32px;

  height: 32px;

  position: relative;

}

.cube1, .cube2 {

  background-color: #67CF22;

  width: 30px;

  height: 30px;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-animation: cubemove 1.8s infinite ease-in-out;

  animation: cubemove 1.8s infinite ease-in-out;

}

.cube2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

  100% { -webkit-transform: rotate(-360deg) }

}

@keyframes cubemove {

  25% {

    transform: translateX(42px) rotate(-90deg) scale(0.5);

    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

  } 50% {

    transform: translateX(42px) translateY(42px) rotate(-179deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

  } 50.1% {

    transform: translateX(42px) translateY(42px) rotate(-180deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

  } 75% {

    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

  } 100% {

    transform: rotate(-360deg);

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

  }

}

Loading 动画效果五

HTML 代码：

<div class="spinner">

  <div class="dot1"></div>

  <div class="dot2"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 90px;

  height: 90px;

  position: relative;

  text-align: center;

  -webkit-animation: rotate 2.0s infinite linear;

  animation: rotate 2.0s infinite linear;

}

.dot1, .dot2 {

  width: 60%;

  height: 60%;

  display: inline-block;

  position: absolute;

  top: 0;

  background-color: #67CF22;

  border-radius: 100%;

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

.dot2 {

  top: auto;

  bottom: 0px;

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

  0%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

Loading 动画效果六

div {
width: 30px;
height: 30px;
background-color: #67CF22;

border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner6 .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner6 .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
-->

HTML 代码：

<div class="spinner">

  <div class="bounce1"></div>

  <div class="bounce2"></div>

  <div class="bounce3"></div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto 0;

  width: 150px;

  text-align: center;

}

.spinner > div {

  width: 30px;

  height: 30px;

  background-color: #67CF22;

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

  animation: bouncedelay 1.4s infinite ease-in-out;

  /* Prevent first frame from flickering when animation starts */

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.spinner .bounce1 {

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.spinner .bounce2 {

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

Loading 动画效果七

HTML 代码：

<div class="spinner"></div>

CSS 代码：

.spinner {

  width: 40px;

  height: 40px;

  margin: 100px auto;

  background-color: #333;

  border-radius: 100%;

  -webkit-animation: scaleout 1.0s infinite ease-in-out;

  animation: scaleout 1.0s infinite ease-in-out;

}

@-webkit-keyframes scaleout {

  0% { -webkit-transform: scale(0.0) }

  100% {

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

@keyframes scaleout {

  0% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 100% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

Loading 动画效果八

div, .container2 > div, .container3 > div {
width: 16px;
height: 16px;
background-color: #67CF22;

border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner8 .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}

.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}

.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}

.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
-->

HTML 代码：

<div class="spinner">

  <div class="spinner-container container1">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container2">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container3">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

</div>

CSS 代码：

.spinner {

  margin: 100px auto;

  width: 20px;

  height: 20px;

  position: relative;

}

.container1 > div, .container2 > div, .container3 > div {

  width: 6px;

  height: 6px;

  background-color: #333;

  border-radius: 100%;

  position: absolute;

  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

  animation: bouncedelay 1.2s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.spinner .spinner-container {

  position: absolute;

  width: 100%;

  height: 100%;

}

.container2 {

  -webkit-transform: rotateZ(45deg);

  transform: rotateZ(45deg);

}

.container3 {

  -webkit-transform: rotateZ(90deg);

  transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

.container3 .circle1 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

.container1 .circle2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

.container2 .circle2 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

.container3 .circle2 {

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}

.container1 .circle3 {

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}

.container2 .circle3 {

  -webkit-animation-delay: -0.5s;

  animation-delay: -0.5s;

}

.container3 .circle3 {

  -webkit-animation-delay: -0.4s;

  animation-delay: -0.4s;

}

.container1 .circle4 {

  -webkit-animation-delay: -0.3s;

  animation-delay: -0.3s;

}

.container2 .circle4 {

  -webkit-animation-delay: -0.2s;

  animation-delay: -0.2s;

}

.container3 .circle4 {

  -webkit-animation-delay: -0.1s;

  animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

完整源码下载

您可能感兴趣的相关文章

本文链接：分享8个使用 CSS3 实现的超炫的网页加载动画效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空（http://www.cnblogs.com/lhb25/）】

使用 CSS3 实现超炫的 Loading（加载）动画效果的更多相关文章

我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
loading加载动画效果js实现
<style>.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
一款由jquery实现的超炫的页面加载特效
今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览源码下载实现的代码. ...
原生JS+ CSS3创建loading加载动画；
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

随机推荐

HDU--航海舰队
海舰队 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
Android使用Application的好处
如果一个应用程序有2个入口的,1个入口程序打开修改其中的内容,怎么实现另一个入口的数据也修改呢? 下面就用到Application来实现数据的共享,因为一个应用程序只有一个Application,Ap ...
验证mongodb主从复制过程~记录操作
接 mongodb的安装:http://www.cnblogs.com/myrunning/p/4319367.html 1.1创建数据目录在这里我们将不使用mongodb的配置文件启动mongod ...
安装使用Oracle OSWbb/OSWbba工具
OSWbb是收集数据,OSWbba 是分析数据,在OSWbb4.0以后,OSWbba已经绑定在OSWbb内. 1.创建目录,上传/解压安装包 [oracle@std ~]$ mkdir oswbb [ ...
socket编程学习step1
socket学习参考链接,赞一个:http://blog.csdn.net/hguisu/article/details/7445768 sockets(套接字)编程有三种,流式套接字(SOCK_ST ...
Unity3d使用高通Vuforia发布IOS工程不支持64位的一些解决办法
1.将Unit升级至4.6.x或5.0.x,将Vuforia差距升级到最新版本(vuforia-unity-mobile-android-ios-4-0-105 ) 2.平台Other Setting ...
Struts2中method={1}
<action name="Person_*" class="com.action.PersonAction" method="{1}" ...
python1
leetcode上面的很简单的题目 Given an integer (signed 32 bits), write a function to check whether it is a power ...
Mycat 月分片方法
概述本篇文章主要介绍Mycat以月进行分片的方法,包括配置方法.注意事项等. mycat版本:1.4 数据节点:dn1,dn2,dn3 架构:主从配置创建测试表 CREATE TABLE `t ...
C语言 · 前缀表达式
问题描述编写一个程序,以字符串方式输入一个前缀表达式,然后计算它的值.输入格式为:"运算符对象1 对象2",其中,运算符为"+"(加法)."-&q ...

使用 CSS3 实现超炫的 Loading（加载）动画效果

使用 CSS3 实现超炫的 Loading（加载）动画效果的更多相关文章

随机推荐

热门专题