文本颜色填充从左到右使用CSS

问题描述

我试图动画的文本有。popUpWord。在悬停时，我想做一个颜色动画，文字的颜色从左到右变化。

 < span class =popUpWord> hello< / span> 
  

我想做的是类似这个 - ，但我希望它从左到右填充，

这是否可以通过css请求？解决方案

添加外部div添加 mix-blend-mode：multiply; 当：hover

  .popUpWord {text-transform：uppercase; font：bold 26vmax / .8 Open Sans，Impact;背景：黑色; display：table; color：white;}。outPop：hover {margin：auto;背景：线性梯度（深红色，深红色）白色无重复0 0; background-size：0 100％;动画：条纹2s线性1前进;}。outPop：hover .popUpWord {mix-blend-mode：multiply;} @ keyframes stripes {to {background-size：100％100％; }} body {float：left;高度：100％; background：black;}  

 < div class =outPop >< div class =popUpWord>文本< / div>< / div>  

I am trying to animate the text having class ".popUpWord". On hover, I would like to do a colour animation with the colour of text changing from left to right.

<span class="popUpWord">hello</span>

What I would like to do is similar to this one - Animate text fill from left to right , but I want it to be filled in from left to right and stop, rather than repeating it.

Is this possible through css please?

解决方案

add an outer div add mix-blend-mode: multiply; when :hover

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>

这篇关于文本颜色填充从左到右使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！