html中实现图片的无限滚动,CSS3 背景图片无限滚动之波浪效果的实现

效果

HTML

body{ background: #2f2e34; }

.a,.b,.c{width: 100%; height: 240px; position: absolute; bottom: 0;}

.a{

background: url(top1.png) 0 bottom repeat-x;

background-size: 100% 140px;

-webkit-animation: animate-cloud 140s linear infinite;

-moz-animation: animate-cloud 140s linear infinite;

-ms-animation: animate-cloud 140s linear infinite;

-o-animation: animate-cloud 140s linear infinite;

animation: animate-cloud 140s linear infinite;

}

.b{

background: url(top2.png) 0 bottom repeat-x;

background-size: 100% 130px;

-webkit-animation: animate-cloud 190s linear infinite;

-moz-animation: animate-cloud 190s linear infinite;

-ms-animation: animate-cloud 190s linear infinite;

-o-animation: animate-cloud 190s linear infinite;

animation: animate-cloud 190s linear infinite;

}

.c{

background: url(top3.png) 0 bottom repeat-x;

background-size: 100% 145px;

-webkit-animation: animate-cloud 400s linear infinite;

-moz-animation: animate-cloud 400s linear infinite;

-ms-animation: animate-cloud 400s linear infinite;

-o-animation: animate-cloud 400s linear infinite;

animation: animate-cloud 400s linear infinite;

}

@-webkit-keyframes animate-cloud {

from {

background-position: 9999px 100%;

}

to {

background-position: 0 100%;

}

}

@-moz-keyframes animate-cloud {

from {

background-position: 9999px 100%;

}

to {

background-position: 0 100%;

}

}

@-ms-keyframes animate-cloud {

from {

background-position: 9999px 100%;

}

to {

background-position: 0 100%;

}

}

@-o-keyframes animate-cloud {

from {

background-position: 9999px 100%;

}

to {

background-position: 0 100%;

}

}