带动画的液体填充文本

Question

我正在尝试制作一个 CSS 动画来制作一个像充满液体的文本。我遵循了一个示例 (Filling water animation)，但我需要对文本做同样的事情，而不是圆圈。

我可以只使用 CSS 吗？我不需要将百分比文本与文本填充量相关联。我的意思是，如果我写了 73%，我不需要自动填充，直到 73% 容量。

#banner {
  width: 300px;
  height: 300px;
  position: relative;
  background: #ccc;
  border-radius: 50%;
  overflow: hidden;
}
#banner::before {
  content: '';
  position: absolute;
  background: #ff0019;
  width: 100%;
  bottom: 0;
  animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}
@keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 73%;
  }
}

<div id="banner">73%</div>

Answer 1

这是像液体一样填充的文本。 在 Chrome 中运行良好，但在 Firefox 中需要调整。

#banner {
  position: relative;
  overflow: hidden;
font-family: sans-serif;
font-size: 40pt;
font-weight: bold;
background: #ccc
}
.inner {
background: #000;
color:#fff;
mix-blend-mode: multiply;
 }
#banner::before {
  content: '';
  position: absolute;
  background: #0f0;
  width: 100%;
  bottom: 0;
  animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;
}

@keyframes wipe {
  0% {
    height: 0;
  }
  100% {
    height: 73%;
  }
}

<span id="banner">
    <span class="inner">73%</span>
</span>