SOURCE

  <div class="bg">
    <p>图片模拟svg波浪，原因：视差</p>
    <div class="wave1"></div>
    <div class="wave2"></div>
</div>

*{
  padding:0;
  margin:0;
}
body,html{
  width:100%;
  height:100%;
}
.bg{
  width:100%;
  height:100%;
  position:relative;
  background:rgba(0,0,0,0.5);
  overflow:hidden;
}
.wave1{
  width:400%;
  height:100px;
  background:url("http://www.17sucai.com/preview/494410/2017-09-30/bsweb/images/wave-01_4e036a5.png") repeat-x;
  background-size:auto 100%;
  position:absolute;
  bottom:0;
  left: -300px;
  z-index: 99;
  animation: wave_up 25s linear .4s infinite normal;
}

.wave2{
  width:400%;
  height:100px;
  background:url("http://www.17sucai.com/preview/494410/2017-09-30/bsweb/images/wave-02_ed6b017.png") repeat-x;
  background-size:auto 100%;
  position:absolute;
  bottom:0;
  left: 0;
  z-index: 98;
  animation: wave_down 60s linear .4s infinite normal;
}

@keyframes wave_up{
  0% {
      left: -236px;
  }
  100% {
      left: -1233px;
  }
}
@keyframes wave_down{
   0% {
      left: 0;
  }
  100% {
      left: -1009px;
  }
}