css 3 波浪特效

  /* Water  */
@keyframes wave-animation-1{0%{background-position:0 top}100%{background-position:600px top}}@keyframes wave-animation-2{0%{background-position:0 top}100%{background-position:600px top}}

.water {
  position: absolute;
  left: 0;
  bottom: 0px;
  height: 30px;
  width: 100%;
  z-index: 1;
}
.water-c {
  position: relative;
}
.water-1, .water-2 {
  position: absolute;
  width: 100%;
  height: 30px;
}
.water-1 {
  background: url(../addons/ewei_shopv2/static/images/water-1.svg) repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-1 3.5s infinite linear;
  animation: wave-animation-1 3.5s infinite linear;
}
.water-2 {
  top: 0;
  background: url(../addons/ewei_shopv2/static/images/water-2.svg) repeat-x;
  background-size: 600px;
  -webkit-animation: wave-animation-2 6s infinite linear;
  animation: wave-animation-2 6s infinite linear;
}

<div class="water"><div class="water-c"><div class="water-1"></div><div class="water-2"></div></div></div>

 svg附件：https://files.cnblogs.com/files/jimz/water.zip