[代码]SVG实现波纹效果

一个svg实现的波纹效果

  <div class="wave_ripple">
    <svg
      class="wave_waves"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 24 150 28"
      preserveAspectRatio="none"
      shape-rendering="auto">
      <defs>
        <path
          id="xuxu-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="wave_parallax">
        <use
          xlink:href="#xuxu-wave"
          x="48"
          y="0"
          fill="rgba(242, 246, 252, 0.7)"></use>
        <use
          xlink:href="#xuxu-wave"
          x="48"
          y="3"
          fill="rgba(242, 246, 252, 0.5)"></use>
        <use
          xlink:href="#xuxu-wave"
          x="48"
          y="5"
          fill="rgba(242, 246, 252, 0.3)"></use>
        <use
          xlink:href="#xuxu-wave"
          x="48"
          y="7"
          fill="#f7f9fe"></use>
      </g>
    </svg>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.wave_ripple {
  height: 15vh;
  max-height: 150px;
  min-height: 100px;
  position: relative;
  width: 100%;
}
.wave_waves{
  height: 100%;
  position: relative;
  width: 100%;
}

.wave_parallax use {
  animation: wave_move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.wave_parallax>use:first-child {
  animation-delay: -2s;
  animation-duration: 7s;
}

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

.wave_parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.wave_parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}