如何使椭圆形内的条带在css中有波浪？答案

【问题标题】：How to make my strip inside an oval have waves in css?如何使椭圆形内的条带在css中有波浪？
【发布时间】：2018-10-25 20:50:42
【问题描述】：

我有一个椭圆形，在椭圆形里面，我有一条条，我需要它来产生波浪

我做了这个：

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

我怎样才能使我的地带具有无限波动画？

【问题讨论】：

你的意思是蓝条会从底部滑入视野，从顶部滑出，无限循环？
几个不同的想法！我想我们不清楚你的目标是什么¯\_(ツ)_/¯
@showdev 是的，哈哈：p 我想到了最有趣的想法：p
@TemaniAfif 我喜欢它！实际波形。我没有考虑到这一点。
抱歉，我还是不明白你所说的“波浪效应”是什么意思。

标签： html css

【解决方案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>

【讨论】：

我喜欢它，但是，如何为波浪设置动画？这就是我要找的东西
@IsaíasOrozcoToledo 他们是动画的吗？ :) 如您所见，通过更改背景位置
是的，兄弟，但动画就像水波一样。但我正在寻找如何用你的 sn-p 做到这一点:)
@IsaíasOrozcoToledo 如果你有一个例子，我可以看到，因为有很多不同的方式来产生水波。
好的，这是 stackoverflow 中的一个：stackoverflow.com/questions/29738787/filling-water-animation 这是示例：

【解决方案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>

【讨论】：