如何让我的椭圆形内的条带在 css 中具有波浪?

Question

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

我已经做了这个：

.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>

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

Answer 1

您可以尝试在linear-graident上重复radial-gradient来创建波浪。然后你可以简单地对背景位置进行动画处理，你可以摆脱一个 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>

Answer 2

如果我理解正确，您希望波浪上下波动？

您可以指定百分比而不是from，to为keyframes-selector

.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 {
0% {
bottom: 0%;
}
50% {
bottom: 100%;
}
100% {
bottom: 0%;
}
}
.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>