如何在 div 动画上添加文本？

Question

嘿我最近开始学习HTML。

我有一个装有液体的“水箱”（动画）。现在我想在这个液体动画上添加它的值，例如 85%。如果我在 liquid div 中转动 p 标签，文本也会旋转，但它不应该旋转。我该如何解决这个问题？

HTML 部分

            <div id="gas-station-diesel-tank-background">
          <div class="gas-station-diesel-progress">
            <div class="gas-station-diesel-progress-inner">

              <div class="gas-station-diesel-progress-inner-water">
                <p id="gas-station-diesel-tank-progress-text">85%</p>

              </div>
            </div>
          </div>
        </div>

CSS 部分


@keyframes spin {
    from {
        transform: rotate(0deg);
   }
    to {
        transform: rotate(360deg);
   }
}

.gas-station-diesel-progress {
    position: relative;
    width: 250px;
    height: 250px;
}

.gas-station-diesel-progress .gas-station-diesel-progress-inner {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    width: 95px;
    height: 190px;
    margin-top: 1px;
    border-radius: 5px;
}

.gas-station-diesel-progress .gas-station-diesel-progress-inner .gas-station-diesel-progress-inner-water {
    position: absolute;
    z-index: 1;
    background: linear-gradient(-90deg, rgba(130,250,88,1) 0%, rgba(2,163,119,1) 100%);
    width: 300%;
    height: 150%;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: all 1s ease !important;
    -webkit-transition: all 1s ease !important;
    top: 15%;
    left: -50%;
    border-radius: 45% !important;
    animation-duration: 10s;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-top: -5px;
    margin-left: -37px;
}

#gas-station-diesel-tank-progress-text {
    font-family: 'Titillium-Bold';
    font-size: 18px;
    color: #fff;
    margin-left: 30px;
    bottom: -10px;
    text-shadow: 0px 0px 10px #000000;
}

Answer 1

像这样从液体中删除您的文字：

<div class="gas-station-diesel-progress-inner">
  <p id="gas-station-diesel-tank-progress-text">85%</p>
  <div class="gas-station-diesel-progress-inner-water"></div>
</div>

你可以把它放在上面或下面。

将绝对位置添加到您的文本中，以便它从文档流中删除并且不会干扰您的其他元素。添加 z-index 使其位于水面之上。

#gas-station-diesel-tank-progress-text {
    font-family: 'Titillium-Bold';
    position: absolute;
    font-size: 18px;
    color: #fff;
    margin-left: 30px;
    z-index: 10;
    text-shadow: 0px 0px 10px #000000;
}

如何在 div 动画上添加文本？

How can i add a text over an div animation?

html

css

css-animations