css 跳跃动画,CSS3 台阶跳跃动画

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);

}

}