动态文本颜色填充 css

Question

我正在尝试用颜色从左到右填充文本，如以下codepen。

这导致以下 css 出现问题：

@keyframes stripes {
    to {
        width: 32px;
    }
}

长度超过 32 像素的字词没有被完全填满并在 32 像素处停止。如果我增加这个宽度，短词（例如狗）将被快速填充。

我想在 2 秒内填写所有个字词（不考虑字词长度）

请问有谁知道如何做到这一点？

谢谢！

Answer 1

.tooltiptext {
    position: relative;
    display: inline-block;
}
.tooltiptext:after {
    content: "";
}
.popUpWord {
    color: pink;
    white-space: nowrap;
}
.popUpWordBlack {
    color: black;
}
.outPop {
    margin: auto;
    background: none;
    overflow: hidden;
    display: block;
    position: absolute;
    animation-play-state: unset;
    left: 0;
    top: 0;
    width:0;
}
.outPopBlack:hover + .outPop,
.outPop:hover {
    animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
    display: block;
    position: relative;
    z-index: 0;
}
@keyframes stripes {
    to {
        width: 100%;
    }
}

<span class="tooltiptext"> 
  <span class="outPopBlack">
    <span class="popUpWordBlack">hello World</span>
  </span>  
  <span class="outPop">
    <span class="popUpWord">hello World</span>
  </span>
</span>

如果你不必使用多行，你可以使用这种方法，

添加“显示：内联块；”到工具提示文本

添加空格：nowrap;到 .popUpWord，

将 .outPop 的样式更改为 边距：自动； 背景：无； 溢出：隐藏； 显示：块； 位置：绝对； 动画播放状态：未设置； 左：0； 顶部：0； 宽度：0;

你也可以用更少的代码使用这些方法

.text {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.text:after {
  content: "HEllo World";
  position: absolute;
  z-index: 1;
  color: red;
  left: 0;
  top: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: 500ms linear all;
}

.text:hover:after {
  width: 100%;
}

.text1 {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.text1>.dup {
  content: "HEllo World";
  position: absolute;
  z-index: 1;
  color: red;
  left: 0;
  top: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: 500ms linear all;
}

.text1:hover>.dup {
  width: 100%;
}

<div class="text">
  HEllo World
</div>
<br>
<br>
<div class="text1">
  HEllo World
  <span class="dup">HEllo World</span>
</div>