CSS
语言：
CSSSCSS
确定
.load_block {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #464544;
}
.load_block .lb {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
}
.load_block .lb:after {
content: '';
position: absolute;
z-index: 3;
bottom: 0;
left: 25px;
width: 30px;
height: 14px;
border-radius: 50%;
background-color: #111;
-webkit-animation: shadow 1.4s linear infinite;
animation: shadow 1.4s linear infinite;
}
.load_block .lb .ball {
position: absolute;
bottom: 40px;
z-index: 5;
width: 40px;
height: 40px;
left: 20px;
border-radius: 50%;
background-color: #eee;
-webkit-animation: ball 1.4s linear infinite;
animation: ball 1.4s linear infinite;
}
.load_block .lb .ball:after {
content: '';
position: absolute;
top: 4px;
left: 12px;
width: 8px;
height: 6px;
background-color: #fff;
border-radius: 50%;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
-webkit-animation: light 1.4s linear infinite;
animation: light 1.4s linear infinite;
}
@-moz-keyframes ball {
0% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
36% {
width: 40px;
height: 40px;
left: 20px;
bottom: 0;
}
37% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
44% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
78% {
width: 36px;
height: 44px;
left: 22px;
bottom: 34px;
}
95% {
bottom: 40px;
}
100% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
}
@-webkit-keyframes ball {
0% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
36% {
width: 40px;
height: 40px;
left: 20px;
bottom: 0;
}
37% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
44% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
78% {
width: 36px;
height: 44px;
left: 22px;
bottom: 34px;
}
95% {
bottom: 40px;
}
100% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
}
@-o-keyframes ball {
0% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
36% {
width: 40px;
height: 40px;
left: 20px;
bottom: 0;
}
37% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
44% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
78% {
width: 36px;
height: 44px;
left: 22px;
bottom: 34px;
}
95% {
bottom: 40px;
}
100% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
}
@keyframes ball {
0% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
36% {
width: 40px;
height: 40px;
left: 20px;
bottom: 0;
}
37% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
44% {
width: 48px;
height: 36px;
left: 16px;
bottom: 0;
}
78% {
width: 36px;
height: 44px;
left: 22px;
bottom: 34px;
}
95% {
bottom: 40px;
}
100% {
width: 40px;
height: 40px;
left: 20px;
bottom: 40px;
}
}
@-moz-keyframes shadow {
0% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
36% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
37% {
left: 25px;
width: 30px;
height: 14px;
}
44% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
78% {
left: 33px;
width: 14px;
height: 4px;
}
95% {
left: 34px;
width: 12px;
height: 4px;
}
100% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
}
@-webkit-keyframes shadow {
0% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
36% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
37% {
left: 25px;
width: 30px;
height: 14px;
}
44% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
78% {
left: 33px;
width: 14px;
height: 4px;
}
95% {
left: 34px;
width: 12px;
height: 4px;
}
100% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
}
@-o-keyframes shadow {
0% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
36% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
37% {
left: 25px;
width: 30px;
height: 14px;
}
44% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
78% {
left: 33px;
width: 14px;
height: 4px;
}
95% {
left: 34px;
width: 12px;
height: 4px;
}
100% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
}
@keyframes shadow {
0% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
36% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
37% {
left: 25px;
width: 30px;
height: 14px;
}
44% {
left: 25px;
width: 30px;
height: 14px;
background-color: #111;
}
78% {
left: 33px;
width: 14px;
height: 4px;
}
95% {
left: 34px;
width: 12px;
height: 4px;
}
100% {
left: 34px;
width: 12px;
height: 4px;
background-color: #333;
}
}
@-moz-keyframes light {
0% {
left: 12px;
}
36% {
left: 12px;
}
37% {
left: 16px;
}
44% {
left: 16px;
}
78% {
left: 10px;
}
95% {
left: 12px;
}
100% {
left: 12px;
}
}
@-webkit-keyframes light {
0% {
left: 12px;
}
36% {
left: 12px;
}
37% {
left: 16px;
}
44% {
left: 16px;
}
78% {
left: 10px;
}
95% {
left: 12px;
}
100% {
left: 12px;
}
}
@-o-keyframes light {
0% {
left: 12px;
}
36% {
left: 12px;
}
37% {
left: 16px;
}
44% {
left: 16px;
}
78% {
left: 10px;
}
95% {
left: 12px;
}
100% {
left: 12px;
}
}
@keyframes light {
0% {
left: 12px;
}
36% {
left: 12px;
}
37% {
left: 16px;
}
44% {
left: 16px;
}
78% {
left: 10px;
}
95% {
left: 12px;
}
100% {
left: 12px;
}
}
