css3+svg实现波浪图

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>css+svg实现波浪图</title>
    <link rel=FaviconIcon href=favicon.ico type=image/x-icon>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <style type="text/css">
      body{
        background: linear-gradient(180deg,#3b5998 20%,#9575cd) fixed!important;
      }
      .editorial {
        display: block;
        width: 100%;
        height: 10em;
        margin-top: -10em;
        position: fixed;
        bottom: 0;
        z-index: -1
      }

      .parallax>use {
        animation: move-forever 12s linear infinite
      }

      .parallax>use:first-child {
        animation-delay: -5s;
        animation-duration: 12s
      }

      .parallax>use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 8s
      }

      .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 5s
      }
      @keyframes move-forever {
        0% {
          transform: translate(-90px)
        }

        to {
          transform: translate(85px)
        }
      }

    </style>
  </head>
    <body class=hold-transition>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" class="editorial"><defs><path id="gentle-wave" d="M-160 44c30 0
    58-18 88-18s
    58 18 88 18
    58-18 88-18
    58 18 88 18
    v44h-352z"></path></defs><g class="parallax"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="3" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="6" fill="rgba(255,255,255,.05)"></use></g></svg>
  </body>
</html>