CSS 3 wave effects

/* 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 attachment: Https://files.cnblogs.com/files/jimz/water.zip

CSS 3 wave effects