使用 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: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Submis ...
[转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量允许选择多个文件:< ...
CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
poj3187-Backward Digit Sums(枚举全排列)
一,题意: 输入n,sum,求1~n的数,如何排列之后,相邻两列相加,直到得出最后的结果等于sum,输出1~n的排列(杨辉三角) 3 1 2 4 //1~n 全排列中的一个排列 4 3 6 7 ...
HTML 常用标签
一.基础标签  定义注释 <!DOCTYPE> 定义文档类型 <style> 定义文档的样式信息 <meta> 定义关于HTML文 ...
io.js入门（三）—— 所支持的ES6（下）
(接上篇) 标准ES6特性 6. 新的String方法/New String methods 7. 符号/Symbols 8. 字符串模板/Template strings 新的String方法/Ne ...
mysql字符串处理例子
项目中用到的,要判断表中某个字段的某几位,若为某个值则替换,用到了几个典型的字符串操作,记录备注实现方案如下: 备注:如果替代字符串是唯一的话,可以用replace,这里用的是concat拼接. DE ...
日志系统实战(二)-AOP动态获取运行时数据
介绍这篇距上一篇已经拖3个月之久了,批评自己下. 通过上篇介绍了解如何利用mono反射代码,可以拿出编译好的静态数据.例如方法参数信息之类的. 但实际情况是往往需要的是运行时的数据,就是用户输入等外 ...
招聘.NET开发人员(截止于2015-06-15)
文章更新 2015-06-15 01:00AM: 感谢各位的支持,简历和解决方案接收截止.2015-06-08 08:30AM: 已经收到一些简历和解决方案,正在筛选中.职位仍然开放,欢迎发送简历及解 ...
UITest 单元测试常用的断言
XCTFail(format…) 生成一个失败的测试: XCTFail(@"Fail"); XCTAssertNil(a1, format...) 为空判断, a1 为空时通过,反 ...

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

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

随机推荐

热门专题