如何优化SVG水波纹效果，实现连续流畅的波浪运动？

当前代码的问题在于波浪平移后首尾无法无缝衔接，以及动画位移逻辑和SVG宽度不匹配，以下是具体优化步骤：

1. 调整波浪元素宽度与动画位移逻辑 #

将每个波浪SVG的宽度设为200%，让波形重复显示；同时修改动画的平移量为50%，这样当一个周期的波形移出屏幕时，另一个周期的波形刚好衔接上来，实现无间断流动。

修改后的CSS代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section .content {
  padding: 10px;
  font-size: 2em;
  margin-bottom: 200px;
}

section {
  position: relative;
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
  background: #3586ff;
}

section .wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%; /* 设置为2倍屏幕宽度 */
}

section .wave1 {
  animation: wave linear 30s infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}

section .wave2 {
  animation: wave2 linear 5s infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -2.5s; /* 调整延迟让波浪错落更自然 */
  bottom: 10px;
}

section .wave3 {
  animation: wave linear 30s infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -5s;
  bottom: 15px;
}

section .wave4 {
  animation: wave2 linear 5s infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -1s;
  bottom: 20px;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 平移-50%，刚好让第二个周期波形衔接 */
  }
}

@keyframes wave2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%); /* 反向流动的波浪平移50% */
  }
}

2. 确保SVG波形无缝重复 #

修改SVG的viewBox为0 0 2880 320（原宽度的2倍），并将路径d复制一次，让波形在2倍宽度内重复，保证平移后首尾完全衔接。

修改后的SVG代码（以wave1为例，其余波浪同理）：

<svg class="wave wave1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2880 320">
  <path fill="white" fill-opacity="1" d="M0,128L60,117.3C120,107,240,85,360,96C480,107,600,149,720,165.3C840,181,960,171,1080,160C1200,149,1320,139,1380,133.3L1440,128L1500,117.3C1560,107,1680,85,1800,96C1920,107,2040,149,2160,165.3C2280,181,2400,171,2520,160C2640,149,2760,139,2820,133.3L2880,128L2880,320L2820,320C2760,320,2640,320,2520,320C2400,320,2280,320,2160,320C2040,320,1920,320,1800,320C1680,320,1560,320,1440,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>

3. 额外优化建议 #

• 调整不同波浪的animation-delay值，让波浪错落有致，更接近真实水波效果；
• 可以微调部分波浪的path路径参数，让每个波浪的形状略有差异，增强层次感；
• 如果需要适配移动端，可保持SVG的viewBox不变，通过CSS控制宽度，确保波形不会变形。

内容的提问来源于stack exchange，提问作者Code With Me