svg和css实现波浪动效

效果：

截图有点模糊~

实现：

//html
<body>
  <svg class="wave-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
    <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 xlink:href="#gentle-wave" x="50" y="0" fill="rgba(224,233,239,.5)"></use>
      <use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(224,233,239,.5)"></use>
      <use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(224,233,239,.5)"></use>
    </g>
  </svg>
</body

//css
*{
  margin:0;
  }
  body{
    background: #2196f3;
  }
  .wave-container{
    margin-top:200px;
     100%;
    height: 150px;
  }
  .parallax>use {
      animation: wave-move 12s linear infinite
  }

  .parallax>use:nth-child(1) {
      animation-delay: -2s
  }

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

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

    100% {
        transform: translate(85px,0)
    }
  }

-----------------------------------------

<style>
    .svg-wrapper {
        height: 80px;
        margin: 60px auto 0;
        position: relative;
         255px;
        background:#ddd;
    }
    .shape {
        fill: transparent;
       /* stroke-dasharray: 208 540;
        stroke-dashoffset: -359;
        stroke- 8px;*/
        stroke- 0;
        stroke: red;
    }
    .svg-wrapper:hover .shape {
        -webkit-animation: 0.5s draw linear forwards;
        -moz-animation: 0.5s draw linear forwards;
        animation: 0.5s draw linear forwards;
    }

    @keyframes draw{
        0% {
          stroke-dasharray: 140 540;
          stroke-dashoffset: -474;
          stroke- 8px;
        }
        100% {
            stroke-dasharray: 760;
            stroke-dashoffset: 0;
            stroke- 8px;
        }
    }      
  </style>



<div class="svg-wrapper">
   <svg height="80" width="255" xmlns="http://www.w3.org/2000/svg">
      <rect class="shape" height="80" width="255"></rect>
  </svg>
</div>

三、原形进度条

<svg width="150px" height="150px" class="svg" xmlns="http://www.w3.org/2000/svg" >
    <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
    <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />
</svg>


   <style>
    svg {
       transform: rotate(-90deg);
    }
    .progress {
        animation: rotate 15000ms linear both;
    }
    @keyframes rotate {
        from {
            stroke-dashoffset: 471px;
        }
        to {
            stroke-dashoffset: 0px;
        }
    }
    </style>