效果：

代码如下：

HTML部分

建立一个div，id为wavesDIV，之后使用svg绘制一个图形出来，此时这个图形还是不会懂的，我们需要使用animation来让他动起来

<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"wavesDIV"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"display: block;"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"waves"</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/2000/svg"</span> <span class="hljs-attribute">xmlns:xlink</span>=<span class="hljs-value">"http://www.w3.org/1999/xlink"</span> <span class="hljs-attribute">viewBox</span>=<span class="hljs-value">"0 24 150 28"</span> <span class="hljs-attribute">preserveAspectRatio</span>=<span class="hljs-value">"none"</span> <span class="hljs-attribute">shape-rendering</span>=<span class="hljs-value">"auto"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">defs</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">path</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"gentle-wave"</span> <span class="hljs-attribute">d</span>=<span class="hljs-value">"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"</span>></span><span class="hljs-tag"></<span class="hljs-title">path</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">defs</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">g</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"parallax"</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#gentle-wave"</span> <span class="hljs-attribute">x</span>=<span class="hljs-value">"48"</span> <span class="hljs-attribute">y</span>=<span class="hljs-value">"-2"</span> <span class="hljs-attribute">fill</span>=<span class="hljs-value">"rgba(125,165,191,0.3)"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#gentle-wave"</span> <span class="hljs-attribute">x</span>=<span class="hljs-value">"48"</span> <span class="hljs-attribute">y</span>=<span class="hljs-value">"3"</span> <span class="hljs-attribute">fill</span>=<span class="hljs-value">"rgba(125,165,191,0.5)"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#gentle-wave"</span> <span class="hljs-attribute">x</span>=<span class="hljs-value">"48"</span> <span class="hljs-attribute">y</span>=<span class="hljs-value">"5"</span> <span class="hljs-attribute">fill</span>=<span class="hljs-value">"rgba(125,165,191,0.7)"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span>
                <span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#gentle-wave"</span> <span class="hljs-attribute">x</span>=<span class="hljs-value">"48"</span> <span class="hljs-attribute">y</span>=<span class="hljs-value">"12"</span> <span class="hljs-attribute">fill</span>=<span class="hljs-value">"rgba(125,165,191,1)"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">g</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>

CSS部分

使用@keyframes设定动画，使用animation调用

<span class="hljs-id">#wavesDIV</span><span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> fixed</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"> <span class="hljs-number">0</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">block</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">20vh</span></span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"><span class="hljs-function">rgb</span>(<span class="hljs-number">125</span>,<span class="hljs-number">165</span>,<span class="hljs-number">191</span>)</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> move-out <span class="hljs-number">2s</span> <span class="hljs-function">cubic-bezier</span>(<span class="hljs-number">0</span>,.<span class="hljs-number">98</span>,.<span class="hljs-number">97</span>,<span class="hljs-number">1</span>) forwards</span></span>;
}</span>
<span class="hljs-class">.waves</span> <span class="hljs-rules">{ 
  <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">relative</span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">15vh</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">margin-top</span>:<span class="hljs-value">-<span class="hljs-number">15vh</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">min-height</span>:<span class="hljs-value"><span class="hljs-number">100px</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">max-height</span>:<span class="hljs-value"><span class="hljs-number">150px</span></span></span>; 
}</span>
<span class="hljs-class">.parallax</span> > <span class="hljs-tag">use</span> <span class="hljs-rules">{ 
  <span class="hljs-rule"><span class="hljs-attribute">animation</span>:<span class="hljs-value"> move-forever <span class="hljs-number">25s</span> <span class="hljs-function">cubic-bezier</span>(.<span class="hljs-number">55</span>, .<span class="hljs-number">5</span>, .<span class="hljs-number">45</span>, .<span class="hljs-number">5</span>) infinite</span></span>; 
}</span> 
<span class="hljs-class">.parallax</span> > <span class="hljs-rule"><span class="hljs-attribute">use</span>:<span class="hljs-value"><span class="hljs-function">nth-child</span>(<span class="hljs-number">1</span>) { 
  animation-delay: -<span class="hljs-number">2s</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">animation-duration</span>:<span class="hljs-value"> <span class="hljs-number">7s</span></span></span>; 
} 
<span class="hljs-class">.parallax</span> > <span class="hljs-rule"><span class="hljs-attribute">use</span>:<span class="hljs-value"><span class="hljs-function">nth-child</span>(<span class="hljs-number">2</span>) { 
  animation-delay: -<span class="hljs-number">3s</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">animation-duration</span>:<span class="hljs-value"> <span class="hljs-number">10s</span></span></span>; 
} 
<span class="hljs-class">.parallax</span> > <span class="hljs-rule"><span class="hljs-attribute">use</span>:<span class="hljs-value"><span class="hljs-function">nth-child</span>(<span class="hljs-number">3</span>) { 
  animation-delay: -<span class="hljs-number">4s</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">animation-duration</span>:<span class="hljs-value"> <span class="hljs-number">13s</span></span></span>; 
} 
<span class="hljs-class">.parallax</span> > <span class="hljs-rule"><span class="hljs-attribute">use</span>:<span class="hljs-value"><span class="hljs-function">nth-child</span>(<span class="hljs-number">4</span>) { 
  animation-delay: -<span class="hljs-number">5s</span></span></span>; 
  <span class="hljs-rule"><span class="hljs-attribute">animation-duration</span>:<span class="hljs-value"> <span class="hljs-number">20s</span></span></span>; 
} 
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> move-forever </span>{ 
  0% <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translate3d</span>(-<span class="hljs-number">90px</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>)</span></span>; 
  }</span> 
  100% <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translate3d</span>(<span class="hljs-number">85px</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>)</span></span>; 
  }</span> 
}
<span class="hljs-at_rule">@<span class="hljs-keyword">keyframes</span> move-out </span>{ 
  0% <span class="hljs-rules">{ 
    <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateY</span>(<span class="hljs-number">400%</span>)</span></span>; 
  }</span> 
  100% <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">transform</span>:<span class="hljs-value"> <span class="hljs-function">translateY</span>(<span class="hljs-number">0%</span>)</span></span>; 
  }</span> 
}
<span class="hljs-tag">home</span><span class="hljs-class">.php</span>?<span class="hljs-tag">mod</span>=<span class="hljs-tag">space</span>&<span class="hljs-tag">uid</span>=945662 (<span class="hljs-rule"><span class="hljs-attribute">max-width</span>:<span class="hljs-value"> <span class="hljs-number">768px</span>) { 
  .waves { 
    height:<span class="hljs-number">40px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">min-height</span>:<span class="hljs-value"><span class="hljs-number">40px</span></span></span>; 
  } 
}

当然如果在中间加多点，譬如说10%,20%,30%,40%,50%,60%，动态会更强烈