如何用CSS实现椭圆内长条的无限波浪动画？

嘿，我来帮你搞定这个无限波浪动画！我们可以通过CSS的clip-path属性结合关键帧动画，让长条的顶部呈现自然的波浪起伏效果，同时保留你原本的向上填充动画逻辑。下面是完整的实现方案：

实现思路 #

• 用clip-path: polygon()定义长条的形状，通过动态调整顶部顶点的Y坐标模拟波浪形态
• 配合关键帧动画，让波浪随长条向上移动的过程同步起伏
• 保留椭圆容器的overflow: hidden属性，确保波浪不会超出容器范围

完整代码示例 #

.oval {
  position: absolute;
  background: #343434;
  border-radius: 150px;
  height: 100px;
  width: 80%;
  overflow: hidden;
}

.strip {
  position: absolute;
  background: #4286f4;
  z-index: 1;
  width: 100%;
  height: 100%;
  bottom: 0;
  /* 初始裁剪形状：底部完全填满，顶部为直线 */
  clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 90% 100%, 80% 100%, 70% 100%, 60% 100%, 50% 100%, 40% 100%, 30% 100%, 20% 100%, 10% 100%, 0% 100%);
  animation: waveFill 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) infinite forwards;
}

@keyframes waveFill {
  0% {
    bottom: 0%;
    clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 90% 100%, 80% 100%, 70% 100%, 60% 100%, 50% 100%, 40% 100%, 30% 100%, 20% 100%, 10% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(0% 80%, 10% 75%, 20% 80%, 30% 70%, 40% 75%, 50% 80%, 60% 70%, 70% 75%, 80% 80%, 90% 75%, 100% 80%, 100% 80%, 90% 75%, 80% 80%, 70% 70%, 60% 75%, 50% 80%, 40% 70%, 30% 75%, 20% 80%, 10% 75%, 0% 80%);
  }
  50% {
    bottom: 50%;
    clip-path: polygon(0% 50%, 10% 45%, 20% 50%, 30% 40%, 40% 45%, 50% 50%, 60% 40%, 70% 45%, 80% 50%, 90% 45%, 100% 50%, 100% 50%, 90% 45%, 80% 50%, 70% 40%, 60% 45%, 50% 50%, 40% 40%, 30% 45%, 20% 50%, 10% 45%, 0% 50%);
  }
  75% {
    clip-path: polygon(0% 20%, 10% 25%, 20% 20%, 30% 30%, 40% 25%, 50% 20%, 60% 30%, 70% 25%, 80% 20%, 90% 25%, 100% 20%, 100% 20%, 90% 25%, 80% 20%, 70% 30%, 60% 25%, 50% 20%, 40% 30%, 30% 25%, 20% 20%, 10% 25%, 0% 20%);
  }
  100% {
    bottom: 100%;
    clip-path: polygon(0% 0%, 10% 0%, 20% 0%, 30% 0%, 40% 0%, 50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%, 100% 0%, 100% 0%, 90% 0%, 80% 0%, 70% 0%, 60% 0%, 50% 0%, 40% 0%, 30% 0%, 20% 0%, 10% 0%, 0% 0%);
  }
}

<div class="oval">
  <div class="strip"></div>
</div>

代码说明 #

• clip-path的作用：通过定义一系列顶点坐标，我们可以自由塑造长条的边缘形状。在关键帧中，我们交替调整顶部顶点的Y值，模拟波浪的高低起伏。
• 动画逻辑：动画分为5个关键阶段，随着长条向上移动（bottom值递增），顶部的波浪形态同步变化，从底部的直线逐步变成波浪，最终填满整个椭圆。
• 无限循环：通过animation-iteration-count: infinite让动画持续重复，实现你想要的无限波浪效果。

如果想要更丝滑的波浪，也可以尝试用CSS变量结合calc()和sin()函数动态计算顶点位置，但目前的关键帧方案已经能很好地实现自然的波浪填充效果啦！

内容的提问来源于stack exchange，提问作者Isaías Orozco Toledo