CSS
语言:
CSSSCSS
确定
.c-loading {
position: relative;
width: 120px;
height: 90px;
padding: 50px;
margin: 0 auto;
}
.c-loading:after,
.c-loading:before {
position: absolute;
content: "";
}
.c-loading:before {
bottom: 80px;
left: 80px;
height: 30px;
width: 30px;
border-radius: 50%;
background: #e91e63;
-webkit-animation: loading-bounce 0.5s ease-in-out infinite alternate;
animation: loading-bounce 0.5s ease-in-out infinite alternate;
}
.c-loading:after {
right: 66px;
height: 7px;
width: 45px;
border-radius: 4px;
box-shadow: 0 5px 0 #e91e63, -35px 50px 0 #e91e63, -70px 95px 0 #e91e63;
-webkit-animation: loading-step 1s ease-in-out infinite;
animation: loading-step 1s ease-in-out infinite;
}
@-moz-keyframes loading-bounce {
0% {
transform: scale(1, 0.7);
}
40% {
transform: scale(0.8, 1.2);
}
60% {
transform: scale(1, 1);
}
100% {
bottom: 140px;
}
}
@-webkit-keyframes loading-bounce {
0% {
transform: scale(1, 0.7);
}
40% {
transform: scale(0.8, 1.2);
}
60% {
transform: scale(1, 1);
}
100% {
bottom: 140px;
}
}
@-o-keyframes loading-bounce {
0% {
transform: scale(1, 0.7);
}
40% {
transform: scale(0.8, 1.2);
}
60% {
transform: scale(1, 1);
}
100% {
bottom: 140px;
}
}
@keyframes loading-bounce {
0% {
transform: scale(1, 0.7);
}
40% {
transform: scale(0.8, 1.2);
}
60% {
transform: scale(1, 1);
}
100% {
bottom: 140px;
}
}
@-moz-keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63;
}
100% {
box-shadow: 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63, -70px 90px 0 rgba(0, 0, 0, 0);
}
}
@-webkit-keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63;
}
100% {
box-shadow: 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63, -70px 90px 0 rgba(0, 0, 0, 0);
}
}
@-o-keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63;
}
100% {
box-shadow: 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63, -70px 90px 0 rgba(0, 0, 0, 0);
}
}
@keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63;
}
100% {
box-shadow: 0 10px 0 #e91e63, -35px 50px 0 #e91e63, -70px 90px 0 #e91e63, -70px 90px 0 rgba(0, 0, 0, 0);
}
}