博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用CSS3实现超炫的Loading(加载)动画效果
阅读量:6155 次
发布时间:2019-06-21

本文共 11221 字,大约阅读时间需要 37 分钟。

 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.2
s infinite ease-in-out;
  
animation: stretchdelay
1.2
s infinite ease-in-out;
}
 
.spinner .rect
2
{
  
-webkit-animation-delay:
-1.1
s;
  
animation-delay:
-1.1
s;
}
 
.spinner .rect
3
{
  
-webkit-animation-delay:
-1.0
s;
  
animation-delay:
-1.0
s;
}
 
.spinner .rect
4
{
  
-webkit-animation-delay:
-0.9
s;
  
animation-delay:
-0.9
s;
}
 
.spinner .rect
5
{
  
-webkit-animation-delay:
-0.8
s;
  
animation-delay:
-0.8
s;
}
 
@-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.2
s infinite ease-in-out;
  
animation: rotateplane
1.2
s infinite ease-in-out;
}
 
@-webkit-keyframes rotateplane {
  
0%
{ -webkit-transform: perspective(
120px
) }
  
50%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg) }
  
100%
{ -webkit-transform: perspective(
120px
) rotateY(
180
deg)  rotateX(
180
deg) }
}
 
@keyframes rotateplane {
  
0%
{
    
transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg);
    
-webkit-transform: perspective(
120px
) rotateX(
0
deg) rotateY(
0
deg)
  
}
50%
{
    
transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg);
    
-webkit-transform: perspective(
120px
) rotateX(
-180.1
deg) rotateY(
0
deg)
  
}
100%
{
    
transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
    
-webkit-transform: perspective(
120px
) rotateX(
-180
deg) rotateY(
-179.9
deg);
  
}
}

  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-bounce
1
, .double-bounce
2
{
  
width
:
100%
;
  
height
:
100%
;
  
border-radius:
50%
;
  
background-color
:
#67CF22
;
  
opacity:
0.6
;
  
position
:
absolute
;
  
top
:
0
;
  
left
:
0
;
   
  
-webkit-animation: bounce
2.0
s infinite ease-in-out;
  
animation: bounce
2.0
s infinite ease-in-out;
}
 
.double-bounce
2
{
  
-webkit-animation-delay:
-1.0
s;
  
animation-delay:
-1.0
s;
}
 
@-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
;
}
 
.cube
1
, .cube
2
{
  
background-color
:
#67CF22
;
  
width
:
30px
;
  
height
:
30px
;
  
position
:
absolute
;
  
top
:
0
;
  
left
:
0
;
   
  
-webkit-animation: cubemove
1.8
s infinite ease-in-out;
  
animation: cubemove
1.8
s infinite ease-in-out;
}
 
.cube
2
{
  
-webkit-animation-delay:
-0.9
s;
  
animation-delay:
-0.9
s;
}
 
@-webkit-keyframes cubemove {
  
25%
{ -webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
) }
  
50%
{ -webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg) }
  
75%
{ -webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
) }
  
100%
{ -webkit-transform: rotate(
-360
deg) }
}
 
@keyframes cubemove {
  
25%
{
    
transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
    
-webkit-transform: translateX(
42px
) rotate(
-90
deg) scale(
0.5
);
  
}
50%
{
    
transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
    
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-179
deg);
  
}
50.1%
{
    
transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
    
-webkit-transform: translateX(
42px
) translateY(
42px
) rotate(
-180
deg);
  
}
75%
{
    
transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
    
-webkit-transform: translateX(
0px
) translateY(
42px
) rotate(
-270
deg) scale(
0.5
);
  
}
100%
{
    
transform: rotate(
-360
deg);
    
-webkit-transform: rotate(
-360
deg);
  
}
}

  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
.spinner {
  
margin
:
100px
auto
;
  
width
:
90px
;
  
height
:
90px
;
  
position
:
relative
;
  
text-align
:
center
;
   
  
-webkit-animation: rotate
2.0
s infinite linear;
  
animation: rotate
2.0
s infinite linear;
}
 
.dot
1
, .dot
2
{
  
width
:
60%
;
  
height
:
60%
;
  
display
: inline-
block
;
  
position
:
absolute
;
  
top
:
0
;
  
background-color
:
#67CF22
;
  
border-radius:
100%
;
   
  
-webkit-animation: bounce
2.0
s infinite ease-in-out;
  
animation: bounce
2.0
s infinite ease-in-out;
}
 
.dot
2
{
  
top
:
auto
;
  
bottom
:
0px
;
  
-webkit-animation-delay:
-1.0
s;
  
animation-delay:
-1.0
s;
}
 
@-webkit-keyframes rotate {
100%
{ -webkit-transform: rotate(
360
deg) }}
@keyframes rotate {
100%
{ transform: rotate(
360
deg); -webkit-transform: rotate(
360
deg) }}
 
@-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 代码:

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.4
s infinite ease-in-out;
  
animation: bouncedelay
1.4
s infinite ease-in-out;
  
/* Prevent first frame from flickering when animation starts */
  
-webkit-animation-fill-mode:
both
;
  
animation-fill-mode:
both
;
}
 
.spinner .bounce
1
{
  
-webkit-animation-delay:
-0.32
s;
  
animation-delay:
-0.32
s;
}
 
.spinner .bounce
2
{
  
-webkit-animation-delay:
-0.16
s;
  
animation-delay:
-0.16
s;
}
 
@-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.0
s infinite ease-in-out;
  
animation: scaleout
1.0
s 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
;
}
 
.container
1
> div, .container
2
> div, .container
3
> div {
  
width
:
6px
;
  
height
:
6px
;
  
background-color
:
#333
;
 
  
border-radius:
100%
;
  
position
:
absolute
;
  
-webkit-animation: bouncedelay
1.2
s infinite ease-in-out;
  
animation: bouncedelay
1.2
s infinite ease-in-out;
  
-webkit-animation-fill-mode:
both
;
  
animation-fill-mode:
both
;
}
 
.spinner .spinner-container {
  
position
:
absolute
;
  
width
:
100%
;
  
height
:
100%
;
}
 
.container
2
{
  
-webkit-transform: rotateZ(
45
deg);
  
transform: rotateZ(
45
deg);
}
 
.container
3
{
  
-webkit-transform: rotateZ(
90
deg);
  
transform: rotateZ(
90
deg);
}
 
.circle
1
{
top
:
0
;
left
:
0
; }
.circle
2
{
top
:
0
;
right
:
0
; }
.circle
3
{
right
:
0
;
bottom
:
0
; }
.circle
4
{
left
:
0
;
bottom
:
0
; }
 
.container
2
.circle
1
{
  
-webkit-animation-delay:
-1.1
s;
  
animation-delay:
-1.1
s;
}
 
.container
3
.circle
1
{
  
-webkit-animation-delay:
-1.0
s;
  
animation-delay:
-1.0
s;
}
 
.container
1
.circle
2
{
  
-webkit-animation-delay:
-0.9
s;
  
animation-delay:
-0.9
s;
}
 
.container
2
.circle
2
{
  
-webkit-animation-delay:
-0.8
s;
  
animation-delay:
-0.8
s;
}
 
.container
3
.circle
2
{
  
-webkit-animation-delay:
-0.7
s;
  
animation-delay:
-0.7
s;
}
 
.container
1
.circle
3
{
  
-webkit-animation-delay:
-0.6
s;
  
animation-delay:
-0.6
s;
}
 
.container
2
.circle
3
{
  
-webkit-animation-delay:
-0.5
s;
  
animation-delay:
-0.5
s;
}
 
.container
3
.circle
3
{
  
-webkit-animation-delay:
-0.4
s;
  
animation-delay:
-0.4
s;
}
 
.container
1
.circle
4
{
  
-webkit-animation-delay:
-0.3
s;
  
animation-delay:
-0.3
s;
}
 
.container
2
.circle
4
{
  
-webkit-animation-delay:
-0.2
s;
  
animation-delay:
-0.2
s;
}
 
.container
3
.circle
4
{
  
-webkit-animation-delay:
-0.1
s;
  
animation-delay:
-0.1
s;
}
 
@-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
);
  
}
}

转载地址:http://kiifa.baihongyu.com/

你可能感兴趣的文章
the assignment of reading paper
查看>>
android apk 逆向中常用工具一览
查看>>
MyEclipse 报错 Errors running builder 'JavaScript Validator' on project......
查看>>
Skip List——跳表,一个高效的索引技术
查看>>
Yii2单元测试初探
查看>>
五、字典
查看>>
前端js之JavaScript
查看>>
Log4J日志配置详解
查看>>
实验7 BindService模拟通信
查看>>
scanf
查看>>
Socket编程注意接收缓冲区大小
查看>>
SpringMVC初写(五)拦截器
查看>>
检测oracle数据库坏块的方法
查看>>
SQL server 安装教程
查看>>
Linux下ftp和ssh详解
查看>>
跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击
查看>>
js时间和时间戳之间如何转换(汇总)
查看>>
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
查看>>
java中string和int的相互转换
查看>>
P1666 前缀单词
查看>>