我正試著讓上課的課文生動起來。popUpWord”。在懸停時，我想做一個彩色動畫，文字的顏色從左向右變化。

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

我想做的是類似于這一個-動畫文本填充從左到右，但我希望它是從左到右填充和停止，而不是重復它。

請問這可以通過css實現嗎？

添加一個外部div add mix-blend-mode:multiply；何時:懸停

.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-grid的justify-content: start定位文本，并啟用overflow:hidden，寬度為0。

懸停時，填充文本div的寬度增加，這有效地實現了相同的效果:從左到右顯示覆蓋文本。覆蓋文本周圍有一個ext ra div，其寬度足以容納文本的整個寬度。這可以防止文本在div大小增加時跳到下一行。

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>

我們可以使用新功能背景-剪輯:文本。首先，我們將我們的顏色設置為透明(這將使我們的背景顏色可見)，然后將背景設置為兩種顏色各占50%的漸變(第一種顏色是我們將過渡到的顏色，第二種顏色是基色)。接下來，我們設置我們的背景大小為200%，背景位置為100%(這將使我們的第二個顏色可見)。最后我們加上背景-位置:0的懸停效果；

h1{
  color: transparent;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  
  transition: background-position 1s ease;
}
h1:hover{
  background-position:0;
}

<h1>Some text</h1>