使用 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" ...

随机推荐

Allegro之测量时显示两种单位（mil & mm）
首先确认你工程默认的单位是mil还是mm 例子为mils 在下面的选项中选择另外一项mm即可(如本身是mm,这里选择mils) 点击Apply,然后OK,操作测量功能,如下图所以效果:
iOS开发之AFNetworking 3.0.4使用
昨天使用Cocoapods导入AFN做POST的时候,导入的最新版的3.0.4,突然发现找不到AFHTTPRequestOperationManager了...上github上一看,发现没有这个了.刚 ...
MySQL5.6 GTID新特性实践
MySQL5.6 GTID新特性实践 GTID简介搭建实验一:如果slave所需要事务对应的GTID在master上已经被purge了实验二:忽略purged的部分,强行同步本文将简单介绍基于 ...
Javascript外部对象
Window 浏览器: - location:地址 - history:历史 - Document:文档 - screen:窗口 - navigator:帮助 > 1.外部对象就是浏览器提供的A ...
方维 o2o app源码出售
方维 o2o app源码出售方维o2oapp源码出售 1.本人官方5万购买,现把方维o2o app 源码低价出售: 2.包括网站源码本地搭建包成功提供指导 3.包括网站说明文档,不包含app说明文档 ...
Redis 数据类型及其特点
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string是redis最 ...
ASP.NET Core Docker部署
前言在前面文章中,介绍了 ASP.NET Core在 macOS,Linux 上基于Nginx和Jexus的发布和部署,本篇文章主要是如何在Docker容器中运行ASP.NET Core应用程序. ...
TDDL分库分表规则
规则如下: 判断一个ID在哪个库里的公式是:id % 4 / 2判断一个ID在哪个表里的公式是:id % 4 % 2 其中4表示总共有多少个分表,2表示总共有多少个数据库:上面这个例子,表示总共有2个 ...
《深入理解Java虚拟机》垃圾收集器
说起垃圾收集(Garbage Collection,GC),大部分人都把这项技术当做Java语言的伴生产物.事实上,GC的历史远比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态 ...
为什么google bazel构建工具流行不起来
作者Jack47 转载请保留作者和原文出处之前博主写了系列文章Google软件构建工具Bazel原理及使用方法介绍.最近使用了一段时间后,觉得这个东西不是一种通用的构建工具,很难对接到情况复杂的大的 ...

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

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

随机推荐

热门专题