CSS文字波浪效果

原理：两个遮罩椭圆的旋转效果，辅以 mix-blend-mod 混合模式实现

<style>
.g-container {
  display: flex;
}
.g-container p {
  position: relative;
  margin: 0;
  line-height: normal;
  font-size: 120px;
  font-weight: bold;
  background: #fff;
  color: #000;
  overflow: hidden;
}
.g-container p::before,
.g-container p::after {
  content: "";
  position: absolute;
  top: -923px;
  left: 50%;
  width: 2000px;
  height: 2000px;
  border-radius: 45% 48% 43% 47%;
  transform: translate(-50%, -50%);
  background: rgba(3, 169, 244, .85);
  animation: rotate 10s infinite linear;
  z-index: 1;
  mix-blend-mode: lighten;
}
.g-container p::after {
  border-radius: 43% 47% 44% 48%;
  animation: rotate 10s infinite .5s linear;
}
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

<div class="g-container">
    <p>TEXT WAVE</p>
</div>