css沿曲线进行动画,CSS3动画-animation-波浪曲线

CSS

语言：

CSSSCSS

确定

body {

background: rgb(0, 171, 217)

}

.quxian {

height: 300px;

width: 100%;

position: absolute;

opacity: 0.6;

}

.quxian1 {

background: url(/uploads/user_upload/36477/quxian1.png) repeat-x 0px center;

top: -50px;

left: 0;

animation: quxian1 20s linear infinite;

-webkit-animation: quxian1 20s linear infinite;

}

.quxian2 {

background: url(/uploads/user_upload/36477/quxian2.png) repeat-x 0px center;

top: -50px;

left: 0;

opacity: 0.2;

animation: quxian2 40s linear infinite;

-webkit-animation: quxian2 40s linear infinite;

}

@-webkit-keyframes quxian1 {

from {

background-position: 0px center;

}

to {

background-position: 1920px center;

}

}

@keyframes quxian1 {

from {

background-position: 0px center;

}

to {

background-position: 1920px center;

}

}

@-webkit-keyframes quxian2 {

from {

background-position: 0px center;

}

to {

background-position: -1920px center;

}

}

@keyframes quxian2 {

from {

background-position: 0px center;

}

to {

background-position: -1920px center;

}

}