SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览）
HTML 代码：
1
2
3
4
5
6
7
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 );
}
}
HTML 代码：
1
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);
}
}
HTML 代码：
1
2
3
4
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 );
}
}
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);
}
}
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 );
}
}
HTML 代码：
1
2
3
4
5
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 );
}
}
HTML 代码：
1
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 ;
}
}
HTML 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 );
}
}
完整源码下载
CSS3-Tutorial
So lösen Sie das Problem, dass CSS nicht geladen werden kann
Was sind die CSS3-Gradienteneigenschaften?
Was tun, wenn CSS nicht geladen werden kann?
Was tun, wenn das Laden der DLL fehlschlägt?
Was tun, wenn im Skript der aktuellen Seite ein Fehler auftritt?
MySQL ändert den Namen der Datentabelle
Lösung für den Syntaxfehler der SQL-Prozedur
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
