html - 文本填充颜色 CSS

Question

我一直在尝试使用 CSS 从左到右实现文本颜色填充，如下 codepen.io/anon/pen/oYojzZ

然而，不是用颜色填充文本，而是填充背景。在这个例子中，文本颜色黑色应该变成粉红色而不是背景。

非常感谢任何帮助。

谢谢

Answer 1

.tooltiptext {
    position: relative;
}
.popUpWord {
    color: pink;
}
.popUpWordBlack {
    color: black;
}
.outPop {
    margin: auto;
    background: none;
    width: 0;
    overflow: hidden;
    display: block;
    position: absolute;
    /* Unset our animation play state initially - this will reset the animation when the hover is no longer */
    animation-play-state: unset;
}
/* Since .outPop is hidden we add the style to either when the element is hovered or it's sibling is hovered */
.outPopBlack:hover + .outPop,
.outPop:hover{
    /* Turn our animation on when we are hovering over our element */
    animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
    display: block;
    position: absolute;
    z-index: -1;
}
@keyframes stripes {
    to {
        width: 32px;
    }
}

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