CSS3 loading效果全

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

 

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

您可能感兴趣的相关文章

  

  

Loading 动画效果一

 
 
 
 
 
 
 
 
 

HTML 代码：

1
2
3
4
5
6
7
<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 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.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 代码：

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

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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 代码：

1
2
3
4
<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.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 代码：

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.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 代码：

CSS 代码：

Loading 动画效果六

 
 
 
 
 

 HTML 代码：

1
2
3
4
5
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.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 代码：

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

CSS 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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 动画效果八

HTML 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
.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 实现的超炫的网页加载动画效果

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

 
好文要顶 关注我 收藏该文  
86
2
 
 
 
« 上一篇：你知道网页设计中最常用的15张图片素材吗？
» 下一篇：经典网页设计：关注用户体验的20个华丽网站
posted @ 2013-12-28 15:17 梦想天空（山边小溪） 阅读(274981) 评论(47) 编辑 收藏
 

 
  
#1楼 2013-12-28 16:46 | 海农  
强大·
支持(0)反对(0)
  
#2楼 2013-12-28 19:47 | 2J  
真强大
就是有些浏览器用不了...
支持(0)反对(0)
  
#3楼 2013-12-28 20:38 | 破浪远航  
CSS3 动画效果的确不错
支持(0)反对(0)
  
#4楼 2013-12-28 20:39 | 金姗  
真的很炫！
支持(0)反对(0)
  
#5楼 2013-12-28 21:21 | 任意球  
来支持下
支持(0)反对(0)
  
#6楼 2013-12-28 21:25 | 任意球  
我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢
支持(0)反对(0)
  
#7楼 2013-12-28 22:24 | 醉温柔  
太厉害了
支持(0)反对(0)
  
#8楼 2013-12-28 23:11 | Rising_Sun  
相当不错
支持(0)反对(0)
  
#9楼 2013-12-29 00:14 | haiziguo  
good
支持(0)反对(0)
  
#10楼 2013-12-29 00:23 | wenbolwm  
效果很不错
支持(0)反对(0)
  
#11楼 2013-12-29 00:26 | 狼狼的蓝胖子  
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢

将进度条隐藏掉就好了啊，你是后台直接输出数据的吗？
支持(0)反对(0)
  
#12楼 2013-12-29 04:49 | 冰麟轻武  
说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用
支持(1)反对(0)
  
#13楼 2013-12-29 11:43 | Mr.Harry  
挺好看的东东..
支持(0)反对(0)
  
#14楼 2013-12-30 09:01 | 大蘋果  
不错蛮好看的
支持(0)反对(0)
  
#15楼[楼主] 2013-12-30 15:57 | 梦想天空（山边小溪）  
@ 戢俊建
引用真强大就是有些浏览器用不了...

用高端浏览器，享高端享受，哈哈
支持(1)反对(0)
  
#16楼[楼主] 2013-12-30 15:58 | 梦想天空（山边小溪）  
@ 任意球
引用我有个js的问题请教下，我加载一个页面，然后使用进度条，我怎样操作进度条在网页加载完毕的时候让进度条消失呢

可以在onload事件里隐藏或删除进度表。
支持(0)反对(0)
  
#17楼[楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）  
@ 冰麟轻武
引用说实话,作为技术研究还不错,但是如果真的用在项目中的话不如一个gif来的实用

移动端还是可以考虑用下 CSS3 的。
支持(0)反对(0)
  
#18楼[楼主] 2013-12-30 15:59 | 梦想天空（山边小溪）  
@ 醉温柔
@金姗
@两美码农
@戢俊建
@hinong
谢谢大家支持！
支持(0)反对(0)
  
#19楼[楼主] 2013-12-30 16:00 | 梦想天空（山边小溪）  
@ 大蘋果
@Mr.Harry
@wenbolwm
@haiziguo
@Rising_Sun
多谢支持！：）
支持(0)反对(0)
  
#20楼 2013-12-30 20:27 | 白树  
好东西，学习了
支持(0)反对(0)
  
#21楼[楼主] 2013-12-31 13:33 | 梦想天空（山边小溪）  
@ 白树
引用好东西，学习了

多谢支持：）
支持(0)反对(0)
  
#22楼 2014-01-01 23:17 | 任意球  
博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接
支持(0)反对(0)
  
#23楼[楼主] 2014-01-02 09:21 | 梦想天空（山边小溪）  
@ 任意球
引用博主，您的这篇文章我可以拿去其他地方分享么，我会说明出处并带您的链接

可以啊：）
支持(0)反对(0)
  
#24楼 2014-01-02 10:14 | 兔子先生不掉毛好么  
谢谢分享 ；）
支持(0)反对(0)
  
#25楼[楼主] 2014-01-02 12:12 | 梦想天空（山边小溪）  
@ 兔子先生不掉毛好么
引用谢谢分享 ；）

不用谢，欢迎常来关注！
支持(0)反对(0)
  
#26楼 2014-01-06 15:34 | geass..  
请教下，跟gif比有什么优势？
支持(0)反对(0)
  
#27楼 2014-01-07 09:21 | Treenew Lyn  
@ geass..
有意思。
和GIF没什么优势。在国内一点P优势都没。
支持(0)反对(0)
  
#28楼[楼主] 2014-01-08 22:46 | 梦想天空（山边小溪）  
@ geass..
引用请教下，跟gif比有什么优势？

使用 CSS 来做可以减少HTTP图片请求，另外可以任意放大缩小。
支持(0)反对(0)
  
#29楼[楼主] 2014-01-08 22:47 | 梦想天空（山边小溪）  
@ Treenew Lyn
引用@geass..有意思。
和GIF没什么优势。在国内一点P优势都没。

这个得看项目啊，哈哈。
像移动Web项目用 CSS3 来做还是很不错的方案。
支持(0)反对(0)
  
#30楼 2014-05-09 21:44 | xujihui  
很好的资源，请注明出处 http://tobiasahlin.com/spinkit/
支持(0)反对(0)
  
#31楼[楼主] 2014-05-09 22:08 | 梦想天空（山边小溪）  
@ xujihui
引用很好的资源，请注明出处 http://tobiasahlin.com/spinkit/

开头就说了是SpinKit加载动画效果。
支持(0)反对(0)
  
#32楼 2014-05-09 23:10 | xujihui  
@ Treenew Lyn
为什么没优势？建议你看一下项目原址
“An easy way to provide a fallback animation is to check for support for the animation property, and replace the spinner with a GIF if it's not supported.”
支持(0)反对(0)
  
#33楼 2014-08-20 16:44 | 刘宏玺  
效果超赞
支持(0)反对(0)
  
#34楼[楼主] 2014-08-21 12:41 | 梦想天空（山边小溪）  
@ 刘宏玺
引用效果超赞

谢谢！
支持(0)反对(0)
  
#35楼 2014-09-11 17:34 | Langjun  
赞，很漂亮！！
支持(0)反对(0)
  
#36楼[楼主] 2014-09-11 19:49 | 梦想天空（山边小溪）  
@ Langjun
引用赞，很漂亮！！

谢谢支持！
支持(0)反对(0)
  
#37楼 2015-01-14 10:31 | bugong  
mark
支持(0)反对(0)
  
#38楼 2015-03-16 15:40 | webfby  
m
支持(0)反对(0)
  
#39楼[楼主] 2015-03-16 21:33 | 梦想天空（山边小溪）  
@ webfby、
@bugong
感谢支持！
支持(0)反对(0)
  
#40楼 2016-01-11 14:30 | 苏荷酒吧  
博主给力啊
支持(0)反对(0)
  
#41楼 2016-01-15 10:41 | 喊你不戴帽子  
mark
支持(0)反对(0)
  
#42楼[楼主] 2016-01-16 21:44 | 梦想天空（山边小溪）  
@ 喊你不戴帽子
@苏荷酒吧
谢谢支持！
支持(0)反对(0)
  
#43楼 2016-08-12 10:16 | lmh2072005  
不错哦
支持(0)反对(0)
  
#44楼 2017-06-07 15:54 | GeQin  
赞一个
支持(0)反对(0)
  
#45楼 2017-06-16 11:57 | 哈喽雨涵  
厉害呀
支持(0)反对(0)
  
#46楼 2017-08-31 22:27 | TaoVincent  
请问在第一个例子中
rect类为什么一定要作为spinner类的后代才能延时呢？
直接用rect类进行延时为什么不好用呢？
支持(0)反对(0)
  
#47楼 2017-09-12 20:28 | 水墨江山画  
赞赞赞
支持(0)反对(0)
 
 
 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/leigepython/p/9290210.html