如何仅用CSS动画与clip-path替代波浪图片实现相同动画？

我通过在背景中使用3张波浪图片实现了水波文字动画与波浪图片动画，但希望仅使用CSS动画和clip-path属性替换这3张背景图片。我已使用keyframes动画持续移动背景图片，并在文字上应用clip-path实现水波效果，仅需替换图片部分，保留文字动画。请问是否可行？若可行，请提供解决方案。

完全可行。我们可以通过clip-path定义波浪的多边形路径，配合CSS动画实现波浪的滚动和形态变化，完全替代图片资源。以下是修改后的实现：

核心思路 #

• 移除所有依赖波浪图片的代码，用纯CSS的clip-path定义波浪轮廓
• 为每个波浪元素设置不同的clip-path路径、动画时长和透明度，模拟多层波浪的层次感
• 保留原有的文字水波动画逻辑

修改后的完整代码 #

CSS 代码 #

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

body {
  height: 100%;
}
.text-animation {
  background: #0f0f0f;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-wrapper {
  position: relative;
}

.text-wrapper h2 {
  z-index: 4;
  color: #f0f0f0;
  font-size: 15vw;
  white-space: nowrap;
  position: absolute;
  transform: translate(-50%, -62%);
}

.text-wrapper h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #f0f0f0;
}

.text-wrapper h2:nth-child(2) {
  color: #fff;
  animation: wave 4s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    clip-path: polygon(
      0% 46%,
      17% 45%,
      34% 50%,
      56% 61%,
      69% 62%,
      86% 60%,
      100% 51%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 59%,
      16% 64%,
      33% 65%,
      52% 61%,
      70% 52%,
      85% 47%,
      100% 48%,
      100% 100%,
      0% 100%
    );
  }
}

/* 纯CSS波浪动画（替代图片） */
.waveDiv {
  position: absolute;
  overflow: hidden;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 200px; /* 控制波浪整体高度 */
}

.wave {
  position: absolute;
  width: 200%;
  height: 100%;
  bottom: 0;
  background: linear-gradient(to top, #002029 0%, #000000 100%);
  animation: wave-scroll linear infinite;
}

.first-wave {
  z-index: 3;
  opacity: 0.5;
  animation-duration: 10s;
  clip-path: polygon(
    0% 70%, 10% 65%, 20% 70%, 30% 68%, 40% 72%, 
    50% 68%, 60% 72%, 70% 69%, 80% 73%, 90% 70%, 
    100% 75%, 100% 100%, 0% 100%
  );
}

.second-wave {
  z-index: 2;
  opacity: 0.75;
  animation-duration: 15s;
  clip-path: polygon(
    0% 60%, 12% 55%, 24% 60%, 36% 58%, 48% 62%, 
    60% 58%, 72% 62%, 84% 59%, 96% 63%, 100% 60%, 
    100% 100%, 0% 100%
  );
}

.third-wave {
  z-index: 1;
  opacity: 1;
  animation-duration: 20s;
  clip-path: polygon(
    0% 50%, 15% 45%, 30% 50%, 45% 48%, 60% 52%, 
    75% 48%, 90% 52%, 100% 49%, 100% 100%, 0% 100%
  );
}

@keyframes wave-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

HTML 代码 #

<section>
  <div class="container">
    <div class="text-animation">
      <div class="text-wrapper">
        <h2>ALAP</h2>
        <h2>ALAP</h2>
      </div>
    </div>

    <div class="waveDiv">
      <div class="wave first-wave"></div>
      <div class="wave second-wave"></div>
      <div class="wave third-wave"></div>
    </div>
  </div>
</section>

说明 #

• 每个波浪的clip-path多边形路径可以根据需求调整，改变波浪的起伏形态
• 通过调整animation-duration可以控制波浪滚动的速度，不同数值让多层波浪形成错落感
• 保留了原有的文字水波动画，完全符合需求

内容的提问来源于stack exchange，提问作者Alap Joshi