CSS
语言:
CSSSCSS
确定
.loader {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px;
-moz-perspective: 180px;
-webkit-perspective: 180px;
perspective: 180px;
-moz-perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.loader .loader--element {
position: absolute;
width: 50%;
height: 50%;
right: 50%;
bottom: 50%;
background: #38d090;
border-radius: 3px 3px 0 3px;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-moz-animation: loader-rotate 1.8s infinite;
-webkit-animation: loader-rotate 1.8s infinite;
animation: loader-rotate 1.8s infinite;
-moz-animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
-webkit-animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.loader .loader--element.loader--element-1 {
width: 50%;
height: 50%;
}
.loader .loader--element.loader--element-2 {
width: 25%;
height: 25%;
-moz-animation-delay: -1s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-moz-keyframes loader-rotate {
0% {
background: #38d090;
-moz-transform: rotate3d(0, 0, 0, 180deg);
transform: rotate3d(0, 0, 0, 180deg);
}
25% {
background: #38d090;
-moz-transform: rotate3d(-1, 0, 0, 180deg);
transform: rotate3d(-1, 0, 0, 180deg);
}
50% {
background: #38d090;
-moz-transform: rotate3d(0, 0, -1, -180deg);
transform: rotate3d(0, 0, -1, -180deg);
}
75% {
background: #38d090;
-moz-transform: rotate3d(0, -1, 0, 180deg);
transform: rotate3d(0, -1, 0, 180deg);
}
100% {
background: #38d090;
-moz-transform: rotate3d(0, -1, 0, 360deg);
transform: rotate3d(0, -1, 0, 360deg);
}
12.5%,
37.5%,
65.5%,
87.5% {
background: #29ac75;
}
}
@-webkit-keyframes loader-rotate {
0% {
background: #38d090;
-webkit-transform: rotate3d(0, 0, 0, 180deg);
transform: rotate3d(0, 0, 0, 180deg);
}
25% {
background: #38d090;
-webkit-transform: rotate3d(-1, 0, 0, 180deg);
transform: rotate3d(-1, 0, 0, 180deg);
}
50% {
background: #38d090;
-webkit-transform: rotate3d(0, 0, -1, -180deg);
transform: rotate3d(0, 0, -1, -180deg);
}
75% {
background: #38d090;
-webkit-transform: rotate3d(0, -1, 0, 180deg);
transform: rotate3d(0, -1, 0, 180deg);
}
100% {
background: #38d090;
-webkit-transform: rotate3d(0, -1, 0, 360deg);
transform: rotate3d(0, -1, 0, 360deg);
}
12.5%,
37.5%,
65.5%,
87.5% {
background: #29ac75;
}
}
@keyframes loader-rotate {
0% {
background: #38d090;
-moz-transform: rotate3d(0, 0, 0, 180deg);
-ms-transform: rotate3d(0, 0, 0, 180deg);
-webkit-transform: rotate3d(0, 0, 0, 180deg);
transform: rotate3d(0, 0, 0, 180deg);
}
25% {
background: #38d090;
-moz-transform: rotate3d(-1, 0, 0, 180deg);
-ms-transform: rotate3d(-1, 0, 0, 180deg);
-webkit-transform: rotate3d(-1, 0, 0, 180deg);
transform: rotate3d(-1, 0, 0, 180deg);
}
50% {
background: #38d090;
-moz-transform: rotate3d(0, 0, -1, -180deg);
-ms-transform: rotate3d(0, 0, -1, -180deg);
-webkit-transform: rotate3d(0, 0, -1, -180deg);
transform: rotate3d(0, 0, -1, -180deg);
}
75% {
background: #38d090;
-moz-transform: rotate3d(0, -1, 0, 180deg);
-ms-transform: rotate3d(0, -1, 0, 180deg);
-webkit-transform: rotate3d(0, -1, 0, 180deg);
transform: rotate3d(0, -1, 0, 180deg);
}
100% {
background: #38d090;
-moz-transform: rotate3d(0, -1, 0, 360deg);
-ms-transform: rotate3d(0, -1, 0, 360deg);
-webkit-transform: rotate3d(0, -1, 0, 360deg);
transform: rotate3d(0, -1, 0, 360deg);
}
12.5%,
37.5%,
65.5%,
87.5% {
background: #29ac75;
}
}