html - 如何从下到上更改文本的背景颜色

Question

我正在尝试在悬停时使文本颜色从下向上或从上到下变化。

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, green 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box">Text</div>

上面的代码使框改变颜色而不是文本。我该怎么做才能使文本颜色而不是框。

Answer 1

你必须使用 Background Clip :

.box {
  width: 200px;
  height: 100px;
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  -webkit-transition: background-position 3s;
  -moz-transition: background-position 3s;
  transition: background-position 3s;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 50pt;
}

.box:hover {
  background-position: 0 -100%;
}

<div class="box">Text</div>

注意:我把字号和时间调大到3秒，看看效果。