标签:cti circle 完整 spi 下载 back tran word demo
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 代码:
1
2
3
4
|
<div class= "spinner" > <div class= "cube1" ></div> <div class= "cube2" ></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
|
.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 代码:
1
2
3
4
|
<div class= "spinner" > <div class= "dot1" ></div> <div class= "dot2" ></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
|
.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 ); } } |
标签:cti circle 完整 spi 下载 back tran word demo
原文地址:http://www.cnblogs.com/huangshikun/p/6640934.html