CSS
语言:
CSSSCSS
确定
.loading {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
}
.loading > div {
position: relative;
float: left;
width: 20px;
height: 20px;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.69, 0.245, 0.185, 1.51);
animation-timing-function: cubic-bezier(0.69, 0.245, 0.185, 1.51);
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
}
.loading > div:nth-child(1) {
background-color: #fa8072;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-name: frame1;
animation-name: frame1;
}
.loading > div:nth-child(2) {
background-color: #fba440;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-animation-name: frame2;
animation-name: frame2;
}
.loading > div:nth-child(3) {
background-color: #579fbb;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-animation-name: frame4;
animation-name: frame4;
}
.loading > div:nth-child(4) {
background-color: #906b92;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-animation-name: frame3;
animation-name: frame3;
}
@-webkit-keyframes frame1 {
0% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
12.5% {
-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
25%,
100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
}
@keyframes frame1 {
0% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
12.5% {
-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
25%,
100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
}
@-webkit-keyframes frame2 {
0%, 24.9%, 50%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
25% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
37.5% {
-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
@keyframes frame2 {
0%, 24.9%, 50%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
25% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
37.5% {
-webkit-transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
@-webkit-keyframes frame3 {
0%, 49.9%, 75%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
50% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
62.5% {
-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
@keyframes frame3 {
0%, 49.9%, 75%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
50% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
62.5% {
-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
@-webkit-keyframes frame4 {
0%, 74.9%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
75% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
87.5% {
-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
@keyframes frame4 {
0%, 74.9%, 100% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 0;
}
75% {
-webkit-transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
opacity: 0.8;
z-index: 10;
}
87.5% {
-webkit-transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
opacity: 1;
z-index: 10;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
body {
background-color: #1d2a38;
}