html - 如何使我的椭圆形带内的css产生波浪？

我有一个椭圆形，在椭圆形内部，我有一条条带需要波浪

我做了这个：

.strip {
  content: "";
  position: relative;
  background: #4286f4;
  z-index: 1;
  width: 100%;
  height: 100%;
  bottom: 0%;
  animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
  animation-iteration-count: infinite;
}

@keyframes wipe {
  from {
    bottom: 0%;
  }
  to {
    bottom: 100%;
  }
}

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

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

如何使我的试条具有无限波动画？

最佳答案

您可以在radial-gradient上尝试一些重复的linear-graident来创建波浪。然后，您可以简单地为背景位置设置动画，并且可以摆脱一个DOM元素。

@keyframes wipe {
  from {
    background-position:0 85px,0 120px;
  }
  to {
    background-position:100px -45px,100px -20px;
  }
}

.oval {
  border-radius: 150px;
  height: 100px;
  width: 80%;
  overflow: hidden;
  background:
   radial-gradient(circle at center,#4286f4 67%,transparent 67.5%)0 5px /50px 50px repeat-x,
   linear-gradient(#343434,#343434)0 30px/100% 150% repeat-x;
  background-color: #4286f4;
  animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
  animation-iteration-count: infinite;
}

<div class="oval">

</div>