Css3动画波浪效果

Question

我创建了一个容器，如果填满了，我想将其应用到某些“波浪动画效果”，但由于不知道如何操作，我有点卡住了：有人能帮我用那些波有效的动画吗？

body {
  background-color: #015871;
}

.container {
  position: relative;
  width: 700px;
  height: 300px;
  margin: 100px auto;
}

.shape {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-top-right-radius: 0;
  transform: rotate(-45deg);
  float: left;
  margin-top: 50px;
  margin-left: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  position: relative;
}

.frame {
  position: absolute;
  transform: rotate(225deg);
  background-color: #00eaff;
  bottom: -80px;
  left: -80px;
  right: 0;
  height: 10px;
  width: 200%;
  animation: fill-up 1s ease infinite;
}

@keyframes fill-up {
  to {
    height: 300px;
  }
}

<div class="container">
  <div class="shape">
    <div class="frame" />
  </div>
</div>

工作示例：https://codesandbox.io/s/vigorous-keldysh-uw2po?file=/src/styles.css:81-720

Answer 1

使用两个旋转块的内部元素.wave改进了代码。没有JavaScript，没有svg。关闭隐藏的溢出功能，以了解其工作原理。

    body {
      background-color: #015871;
    }
    
    .container {
      position: relative;
      width: 700px;
      height: 300px;
      margin: 100px auto;
    }
    
    .shape {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border-top-right-radius: 0;
      transform: rotate(-45deg);
      float: left;
      margin-top: 50px;
      margin-left: 20px;
      border: 5px solid #fff;
      overflow: hidden;
      position: relative;
    }
    
    .frame {
      position: absolute;
      transform: rotate(45deg);
      background-color: rgba(0, 234, 255, 0.5);
      bottom: -8px;
      left: 15px;
      right: 0;
      height: 245px;
      width: 200px;
    }
    
    .wave {
      position: absolute;
      top: 50%;
      left: 0;
      width: 200%; 
      height: 200%;
      transform: translate(-25%,0);
      background: #4973ff; 
      animation: fill-up 10s ease infinite;
    }
    
    @keyframes fill-up {
      to {
        top: -60%;
      }
    }
    
    
    
    .wave:before,
    .wave:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 50%;
      transform: translate(-50%,-75%);
      background: #000;
    }
    .wave:before {
      border-radius: 45%;
      background: rgba(255,255,255,1);
      animation: animate 3s linear infinite;
    }
    .wave:after {
      border-radius: 40%;
      background: rgba(255,255,255,0.5);
      animation: animate 3s linear infinite;
    }
    
    @keyframes animate {
      0% {transform: translate(-50%,-75%) rotate(0deg);}
      100% {transform: translate(-50%,-75%) rotate(360deg);}
    }

    <div class="container">
      <div class="shape">
        <div class="frame">
          <div class="wave">
        
          </div>
        </div>
      </div>
    </div>