实现方法
这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果,都是使用:before和:after伪元素,以及CSS帧动画来完成各种不同的预加载指示器动画。
使用方法
音频波形Loading动画
HTML结构
使用5个空的<span>元素,每一个代表一条波形柱子。
1
2
3
4
5
6
7
|
< div id = "preloader_1" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > |
CSS样式
音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素,使动画动中心开始。
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
|
#preloader_ 1 { position : relative ; } #preloader_ 1 span{ display : block ; bottom : 0px ; width : 9px ; height : 5px ; background : #9b59b6 ; position : absolute ; animation: preloader_ 1 1.5 s infinite ease-in-out; } #preloader_ 1 span:nth-child( 2 ){ left : 11px ; animation-delay: . 2 s; } #preloader_ 1 span:nth-child( 3 ){ left : 22px ; animation-delay: . 4 s; } #preloader_ 1 span:nth-child( 4 ){ left : 33px ; animation-delay: . 6 s; } #preloader_ 1 span:nth-child( 5 ){ left : 44px ; animation-delay: . 8 s; } @keyframes preloader_ 1 { 0% { height : 5px ;transform:translateY( 0px ); background : #9b59b6 ;} 25% { height : 30px ;transform:translateY( 15px ); background : #3498db ;} 50% { height : 5px ;transform:translateY( 0px ); background : #9b59b6 ;} 100% { height : 5px ;transform:translateY( 0px ); background : #9b59b6 ;} } |
通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间,使它们依次产生高度变化的动画效果。
圆形变矩形Loading动画
HTML结构
圆形变矩形Loading动画使用4个空的<span>元素,每一个代表一个圆形/矩形。
1
2
3
4
5
6
|
< div id = "preloader_2" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > |
CSS样式
该loading指示器动画通过修改border-radius属性来实现。
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
|
#preloader_ 2 { position : relative ; left : 50% ; width : 40px ; height : 40px ; } #preloader_ 2 span { display : block ; bottom : 0px ; width : 20px ; height : 20px ; background : #9b59b6 ; position : absolute ; } #preloader_ 2 span:nth-child( 1 ) { animation: preloader_ 2 _ 1 1.5 s infinite ease-in-out; } #preloader_ 2 span:nth-child( 2 ) { left : 20px ; animation: preloader_ 2 _ 2 1.5 s infinite ease-in-out; } #preloader_ 2 span:nth-child( 3 ) { top : 0px ; animation: preloader_ 2 _ 3 1.5 s infinite ease-in-out; } #preloader_ 2 span:nth-child( 4 ) { top : 0px ; left : 20px ; animation: preloader_ 2 _ 4 1.5 s infinite ease-in-out; } @-keyframes preloader_ 2 _ 1 { 0% { -transform: translateX( 0px ) translateY( 0px ) rotate( 0 deg); border-radius: 0px ; } 50% { -transform: translateX( -20px ) translateY( -10px ) rotate( -180 deg); border-radius: 20px ; background : #3498db ; } 80% { -transform: translateX( 0px ) translateY( 0px ) rotate( -360 deg); border-radius: 0px ; } 100% { -transform: translateX( 0px ) translateY( 0px ) rotate( -360 deg); border-radius: 0px ; } } @-keyframes preloader_ 2 _ 2 { 0% { -transform: translateX( 0px ) translateY( 0px ) rotate( 0 deg); border-radius: 0px ; } 50% { -transform: translateX( 20px ) translateY( -10px ) rotate( 180 deg); border-radius: 20px ; background : #f1c40f ; } 80% { -transform: translateX( 0px ) translateY( 0px ) rotate( 360 deg); border-radius: 0px ; } 100% { -transform: translateX( 0px ) translateY( 0px ) rotate( 360 deg); border-radius: 0px ; } } @-keyframes preloader_ 2 _ 3 { 0% { -transform: translateX( 0px ) translateY( 0px ) rotate( 0 deg); border-radius: 0px ; } 50% { -transform: translateX( -20px ) translateY( 10px ) rotate( -180 deg); border-radius: 20px ; background : #2ecc71 ; } 80% { -transform: translateX( 0px ) translateY( 0px ) rotate( -360 deg); border-radius: 0px ; } 100% { -transform: translateX( 0px ) translateY( 0px ) rotate( -360 deg); border-radius: 0px ; } } @-keyframes preloader_ 2 _ 4 { 0% { -transform: translateX( 0px ) translateY( 0px ) rotate( 0 deg); border-radius: 0px ; } 50% { -transform: translateX( 20px ) translateY( 10px ) rotate( 180 deg); border-radius: 20px ; background : #e74c3c ; } 80% { -transform: translateX( 0px ) translateY( 0px ) rotate( 360 deg); border-radius: 0px ; } 100% { -transform: translateX( 0px ) translateY( 0px ) rotate( 360 deg); border-radius: 0px ; } } |
交叉图形变换Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
1
|
< div id = "preloader_3" ></ 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
|
#preloader_ 3 { position : relative ; } #preloader_ 3: before{ width : 20px ; height : 20px ; border-radius: 20px ; background : blue ; content : '' ; position : absolute ; background : #9b59b6 ; animation: preloader_ 3 _before 1.5 s infinite ease-in-out; } #preloader_ 3: after{ width : 20px ; height : 20px ; border-radius: 20px ; background : blue ; content : '' ; position : absolute ; background : #2ecc71 ; left : 22px ; animation: preloader_ 3 _after 1.5 s infinite ease-in-out; } @keyframes preloader_ 3 _before { 0% {transform: translateX( 0px ) rotate( 0 deg)} 50% {transform: translateX( 50px ) scale( 1.2 ) rotate( 260 deg); background : #2ecc71 ;border-radius: 0px ;} 100% {transform: translateX( 0px ) rotate( 0 deg)} } @keyframes preloader_ 3 _after { 0% {transform: translateX( 0px )} 50% {transform: translateX( -50px ) scale( 1.2 ) rotate( -260 deg); background : #9b59b6 ;border-radius: 0px ;} 100% {transform: translateX( 0px )} } |
蛇形Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
1
2
3
4
5
6
7
|
< div id = "preloader_4" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > |
CSS样式
该动画通过修改每一个span元素的Y轴位置,使它们下移10个像素,并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。
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
|
#preloader_ 4 { position : relative ; } #preloader_ 4 span{ position : absolute ; width : 20px ; height : 20px ; background : #3498db ; opacity: 0.5 ; border-radius: 20px ; -animation: preloader_ 4 1 s infinite ease-in-out; } #preloader_ 4 span:nth-child( 2 ){ left : 20px ; animation-delay: . 2 s; } #preloader_ 4 span:nth-child( 3 ){ left : 40px ; animation-delay: . 4 s; } #preloader_ 4 span:nth-child( 4 ){ left : 60px ; animation-delay: . 6 s; } #preloader_ 4 span:nth-child( 5 ){ left : 80px ; animation-delay: . 8 s; } @keyframes preloader_ 4 { 0% { opacity: 0.3 ; transform:translateY( 0px ); box-shadow: 0px 0px 3px rgba( 0 , 0 , 0 , 0.1 );} 50% { opacity: 1 ; transform: translateY( -10px ); background : #f1c40f ; box-shadow: 0px 20px 3px rgba( 0 , 0 , 0 , 0.05 );} 100% { opacity: 0.3 ; transform:translateY( 0px ); box-shadow: 0px 0px 3px rgba( 0 , 0 , 0 , 0.1 );} } |
旋转轮盘Loading动画
HTML结构
该loading动画使用div元素来制作中心的圆形,并使用div元素的:after伪元素来制作两条旋转线效果。
1
|
< div id = "preloader_5" ></ div > |
CSS样式
两条旋转线使用:after伪元素来制作,通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上,修改它的颜色以及通过transform: rotate()来使它进行旋转。
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
|
#preloader 5 { position : relative ; width : 30px ; height : 30px ; background : #3498db ; border-radius: 50px ; animation: preloader_ 5 1.5 s infinite linear; } #preloader 5: after{ position : absolute ; width : 50px ; height : 50px ; border-top : 10px solid #9b59b6 ; border-bottom : 10px solid #9b59b6 ; border-left : 10px solid transparent ; border-right : 10px solid transparent ; border-radius: 50px ; content : '' ; top : -20px ; left : -20px ; animation: preloader_ 5 _after 1.5 s infinite linear; } @keyframes preloader_ 5 { 0% {transform: rotate( 0 deg);} 50% {transform: rotate( 180 deg); background : #2ecc71 ;} 100% {transform: rotate( 360 deg);} } @keyframes preloader_ 5 _after { 0% { border-top : 10px solid #9b59b6 ; border-bottom : 10px solid #9b59b6 ;} 50% { border-top : 10px solid #3498db ; border-bottom : 10px solid #3498db ;} 100% { border-top : 10px solid #9b59b6 ; border-bottom : 10px solid #9b59b6 ;} } |
windows标志Loading动画
HTML结构
每一个span代表一个方块。
1
2
3
4
5
6
|
< div id = "preloader_6" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > |
CSS样式
所有的方块以网格进行布局。动画添加在主div元素上,使它产生旋转。另外i一个动画是使各个span元素不断的从100%缩放到50%。并通过animation-delay来控制各个span的动画延迟时间。
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
|
#preloader_ 6 { position : relative ; width : 42px ; height : 42px ; animation: preloader_ 6 5 s infinite linear; } #preloader_ 6 span{ width : 20px ; height : 20px ; position : absolute ; background : red ; display : block ; animation: preloader_ 6 _span 1 s infinite linear; } #preloader_ 6 span:nth-child( 1 ){ background : #2ecc71 ; } #preloader_ 6 span:nth-child( 2 ){ left : 22px ; background : #9b59b6 ; animation-delay: . 2 s; } #preloader_ 6 span:nth-child( 3 ){ top : 22px ; background : #3498db ; animation-delay: . 4 s; } #preloader_ 6 span:nth-child( 4 ){ top : 22px ; left : 22px ; background : #f1c40f ; animation-delay: . 6 s; } @keyframes preloader_ 6 { from {-ms-transform: rotate( 0 deg);} to {-ms-transform: rotate( 360 deg);} } @keyframes preloader_ 6 _span { 0% { transform:scale( 1 ); } 50% { transform:scale( 0.5 ); } 100% { transform:scale( 1 ); } } |