如何随着背景从左到右更改文本颜色？

Question

我有一个元素，当鼠标悬停时，它会从左到右逐渐改变背景颜色。但是，我不仅要更改背景颜色，还要更改文本颜色，完全相同 time/pace。我怎样才能做到这一点？

这是我的相关 CSS:

.left-to-right {
  color: white;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #011228 50%, #FF7800 50%);
  transition: background-position 1s;
}

.left-to-right:hover {
    background-position: -100% 0;
    color: #011228;
}

Here's the fiddle.

Answer 1

一种可能性是使用 background-clip: 文本。但不幸的是，支持很差。

.test {
  height: 66px;
  width: 200px;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, lightblue 50%, blue 50%), linear-gradient(to right, green 50%, lightgreen 50%);
  transition: background-position 6s;
    text-indent: 28px;
    font-size: 60px;
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: 100% top, 100% top;
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
    color: transparent;
}

.test:hover {
 background-position: 0% top, 0% top;
}

<div class="test">TEST</div>

如何随着背景从左到右更改文本颜色？

How to change color of text from left to right along with the background?

css

css-transitions

css-gradients