css html 45度角箭头,CSS3 波动的箭头

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

}

}