效果
HTML
body{background:#2f2e34;}
.a,.b,.c{width:100%;height:240px;position:absolute;bottom:0;}
.a{
background:url(top1.png)0bottomrepeat-x;
background-size:100%140px;
-webkit-animation:animate-cloud140slinearinfinite;
-moz-animation:animate-cloud140slinearinfinite;
-ms-animation:animate-cloud140slinearinfinite;
-o-animation:animate-cloud140slinearinfinite;
animation:animate-cloud140slinearinfinite;
}
.b{
background:url(top2.png)0bottomrepeat-x;
background-size:100%130px;
-webkit-animation:animate-cloud190slinearinfinite;
-moz-animation:animate-cloud190slinearinfinite;
-ms-animation:animate-cloud190slinearinfinite;
-o-animation:animate-cloud190slinearinfinite;
animation:animate-cloud190slinearinfinite;
}
.c{
background:url(top3.png)0bottomrepeat-x;
background-size:100%145px;
-webkit-animation:animate-cloud400slinearinfinite;
-moz-animation:animate-cloud400slinearinfinite;
-ms-animation:animate-cloud400slinearinfinite;
-o-animation:animate-cloud400slinearinfinite;
animation:animate-cloud400slinearinfinite;
}
@-webkit-keyframesanimate-cloud{
from{
background-position:9999px100%;
}
to{
background-position:0100%;
}
}
@-moz-keyframesanimate-cloud{
from{
background-position:9999px100%;
}
to{
background-position:0100%;
}
}
@-ms-keyframesanimate-cloud{
from{
background-position:9999px100%;
}
to{
background-position:0100%;
}
}
@-o-keyframesanimate-cloud{
from{
background-position:9999px100%;
}
to{
background-position:0100%;
}
}
