携程网 404页水波浪

波浪

<style>
.wave1{position:relative;z-index:3;width:100%;color:#999;background:url(http://pic.c-ctrip.com/common/bl.png) repeat-x 0 0;-webkit-animation:8s linear 0s none infinite tweenxx;-moz-animation:8s linear 0s none infinite tweenxx;animation:8s linear 0s none infinite tweenxx;}
.wave{height:220px;background:url(http://pic.c-ctrip.com/common/bl.png) repeat-x 330px 0;-webkit-animation:10s linear 0s none infinite tweenx;-moz-animation:10s linear 0s none infinite tweenx;animation:10s linear 0s none infinite tweenx;}
@-webkit-keyframes tweenx{
    0%{background-position:0 0;}
    100%{background-position:1600px 0;}
}
@-moz-keyframes tweenx{
    0%{background-position:0 0;}
    100%{background-position:1600px 0;}
}
@keyframes tweenx{
    0%{background-position:0 0;}
    100%{background-position:1600px 0;}
}
@-webkit-keyframes tweenxx{
    0%{background-position:0 0;}
    100%{background-position:-1600px 0;}
}
@-moz-keyframes tweenxx{
    0%{background-position:0 0;}
    100%{background-position:-1600px 0;}
}
@keyframes tweenxx{
    0%{background-position:0 0;}
    100%{background-position:-1600px 0;}
}
</style>
<div class="wave1">
      <div class="wave"></div>
</div>

 

转载于:https://my.oschina.net/u/3147332/blog/807052