CSS
语言:
CSSSCSS
确定
body,
html {
height: 100%;
}
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-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;
background: gold;
}
.arrow_10 {
-webkit-animation: rotate 2s ease-in 2.5s infinite alternate;
animation: rotate 2s ease-in 2.5s infinite alternate;
}
.arrow_9 {
-webkit-animation: rotate 2s ease-in 2.25s infinite alternate;
animation: rotate 2s ease-in 2.25s infinite alternate;
}
.arrow_8 {
-webkit-animation: rotate 2s ease-in 2s infinite alternate;
animation: rotate 2s ease-in 2s infinite alternate;
}
.arrow_7 {
-webkit-animation: rotate 2s ease-in 1.75s infinite alternate;
animation: rotate 2s ease-in 1.75s infinite alternate;
}
.arrow_6 {
-webkit-animation: rotate 2s ease-in 1.5s infinite alternate;
animation: rotate 2s ease-in 1.5s infinite alternate;
}
.arrow_5 {
-webkit-animation: rotate 2s ease-in 1.25s infinite alternate;
animation: rotate 2s ease-in 1.25s infinite alternate;
}
.arrow_4 {
-webkit-animation: rotate 2s ease-in 1s infinite alternate;
animation: rotate 2s ease-in 1s infinite alternate;
}
.arrow_3 {
-webkit-animation: rotate 2s ease-in 0.75s infinite alternate;
animation: rotate 2s ease-in 0.75s infinite alternate;
}
.arrow_2 {
-webkit-animation: rotate 2s ease-in 0.5s infinite alternate;
animation: rotate 2s ease-in 0.5s infinite alternate;
}
.arrow_1 {
-webkit-animation: rotate 2s ease-in 0.25s infinite alternate;
animation: rotate 2s ease-in 0.25s infinite alternate;
}
.arrow {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
to {
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
}