html设置来回滚动,CSS3 来回翻滚式的Loading动效

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

.wrap {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

width: 100%;

height: 100%;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.card {

position: absolute;

width: 40px;

height: 72px;

border-radius: 0.8rem;

-webkit-animation-name: anim;

animation-name: anim;

-webkit-animation-duration: 2.4s;

animation-duration: 2.4s;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

}

.card:nth-of-type(6n+1) {

background: #ffea4b;

}

.card:nth-of-type(6n+2) {

background: #ffc63a;

-webkit-animation-delay: 40ms;

animation-delay: 40ms;

z-index: -10;

}

.card:nth-of-type(6n+3) {

background: #ee9024;

-webkit-animation-delay: 80ms;

animation-delay: 80ms;

z-index: -20;

}

.card:nth-of-type(6n+4) {

background: #ef532c;

-webkit-animation-delay: 100ms;

animation-delay: 100ms;

z-index: -30;

}

.card:nth-of-type(6n+5) {

background: #c11943;

-webkit-animation-delay: 120ms;

animation-delay: 120ms;

z-index: -40;

}

.card:nth-of-type(6n+6) {

background: #c11943;

-webkit-animation-delay: 130ms;

animation-delay: 130ms;

z-index: -50;

}

@-webkit-keyframes anim {

0% {

-webkit-transform: translateX(-100px) rotate(0deg);

transform: translateX(-100px) rotate(0deg);

}

50% {

-webkit-transform: translateX(100px) rotate(360deg);

transform: translateX(100px) rotate(360deg);

}

100% {

-webkit-transform: translateX(-100px) rotate(0deg);

transform: translateX(-100px) rotate(0deg);

}

}

@keyframes anim {

0% {

-webkit-transform: translateX(-100px) rotate(0deg);

transform: translateX(-100px) rotate(0deg);

}

50% {

-webkit-transform: translateX(100px) rotate(360deg);

transform: translateX(100px) rotate(360deg);

}

100% {

-webkit-transform: translateX(-100px) rotate(0deg);

transform: translateX(-100px) rotate(0deg);

}

}