Question

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

我已经做到了：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 2

如果我理解正确你想让波浪上下移动？

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何让我的椭圆内的条带在CSS中有波浪？

2 个答案: