mirror of
https://github.com/QingdaoU/OnlineJudge.git
synced 2025-11-04 14:49:58 +08:00
564 lines
9.3 KiB
CSS
564 lines
9.3 KiB
CSS
|
|
.cssload-battery {
|
|
display: block;
|
|
margin: 175px auto;
|
|
position: relative;
|
|
width: 4.25rem;
|
|
height: 7.5rem;
|
|
box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
|
|
-o-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
|
|
-ms-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
|
|
-webkit-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
|
|
-moz-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
|
|
border-radius: 0.09rem;
|
|
-o-border-radius: 0.09rem;
|
|
-ms-border-radius: 0.09rem;
|
|
-webkit-border-radius: 0.09rem;
|
|
-moz-border-radius: 0.09rem;
|
|
background: white;
|
|
}
|
|
|
|
.cssload-battery:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0.8625rem;
|
|
right: 0.5625rem;
|
|
top: -0.8375rem;
|
|
height: 0.7375rem;
|
|
width: 2.125rem;
|
|
background: rgb(66, 92, 119);
|
|
border-radius: 0.18rem;
|
|
-o-border-radius: 0.18rem;
|
|
-ms-border-radius: 0.18rem;
|
|
-webkit-border-radius: 0.18rem;
|
|
-moz-border-radius: 0.18rem;
|
|
}
|
|
|
|
.cssload-battery:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-right: 4.25rem solid transparent;
|
|
border-bottom: 7.05rem solid rgba(255, 255, 255, 0.325);
|
|
}
|
|
|
|
.cssload-liquid {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 4.25rem;
|
|
background: rgb(113, 251, 133);
|
|
animation: load 5.96s infinite;
|
|
-o-animation: load 5.96s infinite;
|
|
-ms-animation: load 5.96s infinite;
|
|
-webkit-animation: load 5.96s infinite;
|
|
-moz-animation: load 5.96s infinite;
|
|
}
|
|
|
|
.cssload-liquid:after, .cssload-liquid:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
height: 2.125rem;
|
|
width: 2.4625rem;
|
|
background: rgb(113, 251, 133);
|
|
opacity: 0;
|
|
border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
}
|
|
|
|
.cssload-liquid:after {
|
|
right: 0;
|
|
animation: cssload-liquid-1 5.96s infinite;
|
|
-o-animation: cssload-liquid-1 5.96s infinite;
|
|
-ms-animation: cssload-liquid-1 5.96s infinite;
|
|
-webkit-animation: cssload-liquid-1 5.96s infinite;
|
|
-moz-animation: cssload-liquid-1 5.96s infinite;
|
|
}
|
|
|
|
.cssload-liquid:before {
|
|
left: 0;
|
|
animation: cssload-liquid-2 5.96s infinite;
|
|
-o-animation: cssload-liquid-2 5.96s infinite;
|
|
-ms-animation: cssload-liquid-2 5.96s infinite;
|
|
-webkit-animation: cssload-liquid-2 5.96s infinite;
|
|
-moz-animation: cssload-liquid-2 5.96s infinite;
|
|
}
|
|
|
|
@keyframes load {
|
|
0% {
|
|
top: 7.5rem;
|
|
}
|
|
70% {
|
|
top: 2.125rem;
|
|
}
|
|
90% {
|
|
top: 0;
|
|
}
|
|
95% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes load {
|
|
0% {
|
|
top: 7.5rem;
|
|
}
|
|
70% {
|
|
top: 2.125rem;
|
|
}
|
|
90% {
|
|
top: 0;
|
|
}
|
|
95% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes load {
|
|
0% {
|
|
top: 7.5rem;
|
|
}
|
|
70% {
|
|
top: 2.125rem;
|
|
}
|
|
90% {
|
|
top: 0;
|
|
}
|
|
95% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes load {
|
|
0% {
|
|
top: 7.5rem;
|
|
}
|
|
70% {
|
|
top: 2.125rem;
|
|
}
|
|
90% {
|
|
top: 0;
|
|
}
|
|
95% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes load {
|
|
0% {
|
|
top: 7.5rem;
|
|
}
|
|
70% {
|
|
top: 2.125rem;
|
|
}
|
|
90% {
|
|
top: 0;
|
|
}
|
|
95% {
|
|
top: 0;
|
|
}
|
|
100% {
|
|
top: 7.5rem;
|
|
}
|
|
}
|
|
|
|
@keyframes cssload-liquid-1 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
22% {
|
|
height: 0.28125rem;
|
|
top: 0.375rem;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
top: -0.25rem;
|
|
}
|
|
35% {
|
|
height: 2.125rem;
|
|
top: -0.5rem;
|
|
}
|
|
55% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 0.61875rem;
|
|
opacity: 1;
|
|
top: -0.275rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes cssload-liquid-1 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
22% {
|
|
height: 0.28125rem;
|
|
top: 0.375rem;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
top: -0.25rem;
|
|
}
|
|
35% {
|
|
height: 2.125rem;
|
|
top: -0.5rem;
|
|
}
|
|
55% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 0.61875rem;
|
|
opacity: 1;
|
|
top: -0.275rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes cssload-liquid-1 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
22% {
|
|
height: 0.28125rem;
|
|
top: 0.375rem;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
top: -0.25rem;
|
|
}
|
|
35% {
|
|
height: 2.125rem;
|
|
top: -0.5rem;
|
|
}
|
|
55% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 0.61875rem;
|
|
opacity: 1;
|
|
top: -0.275rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes cssload-liquid-1 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
22% {
|
|
height: 0.28125rem;
|
|
top: 0.375rem;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
top: -0.25rem;
|
|
}
|
|
35% {
|
|
height: 2.125rem;
|
|
top: -0.5rem;
|
|
}
|
|
55% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 0.61875rem;
|
|
opacity: 1;
|
|
top: -0.275rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes cssload-liquid-1 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
22% {
|
|
height: 0.28125rem;
|
|
top: 0.375rem;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
top: -0.25rem;
|
|
}
|
|
35% {
|
|
height: 2.125rem;
|
|
top: -0.5rem;
|
|
}
|
|
55% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 0.61875rem;
|
|
opacity: 1;
|
|
top: -0.275rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes cssload-liquid-2 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
17.5% {
|
|
height: 0.28125rem;
|
|
top: 0.2rem;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
top: -0.25rem;
|
|
}
|
|
25% {
|
|
height: 2.40625rem;
|
|
top: -0.625rem;
|
|
}
|
|
45% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 2.40625rem;
|
|
opacity: 1;
|
|
top: -0.5rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes cssload-liquid-2 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
17.5% {
|
|
height: 0.28125rem;
|
|
top: 0.2rem;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
top: -0.25rem;
|
|
}
|
|
25% {
|
|
height: 2.40625rem;
|
|
top: -0.625rem;
|
|
}
|
|
45% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 2.40625rem;
|
|
opacity: 1;
|
|
top: -0.5rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes cssload-liquid-2 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
17.5% {
|
|
height: 0.28125rem;
|
|
top: 0.2rem;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
top: -0.25rem;
|
|
}
|
|
25% {
|
|
height: 2.40625rem;
|
|
top: -0.625rem;
|
|
}
|
|
45% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 2.40625rem;
|
|
opacity: 1;
|
|
top: -0.5rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes cssload-liquid-2 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
17.5% {
|
|
height: 0.28125rem;
|
|
top: 0.2rem;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
top: -0.25rem;
|
|
}
|
|
25% {
|
|
height: 2.40625rem;
|
|
top: -0.625rem;
|
|
}
|
|
45% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 2.40625rem;
|
|
opacity: 1;
|
|
top: -0.5rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes cssload-liquid-2 {
|
|
0% {
|
|
height: 0;
|
|
opacity: 0;
|
|
top: -0.5rem;
|
|
}
|
|
17.5% {
|
|
height: 0.28125rem;
|
|
top: 0.2rem;
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
top: -0.25rem;
|
|
}
|
|
25% {
|
|
height: 2.40625rem;
|
|
top: -0.625rem;
|
|
}
|
|
45% {
|
|
height: 0.28125rem;
|
|
top: -0.125rem;
|
|
}
|
|
60% {
|
|
height: 2.40625rem;
|
|
opacity: 1;
|
|
top: -0.5rem;
|
|
}
|
|
96% {
|
|
height: 1.84375rem;
|
|
opacity: 0;
|
|
top: 0.5rem;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
} |