嘿，你之前的代码是给盒子背景做渐变过渡，要改成文字颜色的效果其实很简单，核心是用到background-clip: text这个CSS属性——它能把元素的背景裁剪到文字的轮廓范围内，再配合你原来的渐变和过渡逻辑就行。

直接给你修改好的完整代码，我会标注关键修改点：

.box {
  width: 200px;
  height: 100px;
  /* 关键：让文字本身透明，这样才能显示背景渐变 */
  color: transparent;
  /* 关键：把背景裁剪到文字区域，webkit前缀兼容大部分旧浏览器 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 保留你原来的渐变背景设置，上下各占50%的颜色 */
  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;
  /* 可选：加行高和居中让文字更美观 */
  line-height: 100px;
  text-align: center;
}

.box:hover {
  /* 切换背景位置，让下半部分的绿色渐变移上来覆盖文字 */
  background-position: 0 -100%;
}

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

原理说明 #

• background-clip: text是核心：它会让元素的背景只在文字的区域显示，相当于把渐变“贴”在文字上。
• 把color设为透明是为了隐藏文字本身的颜色，让渐变背景透出来。
• 你原来的background-size: 100% 200%和渐变上下分色的逻辑完全可以复用，hover时改变背景位置，就实现了文字颜色从下到上的渐变切换。

如果想要从上到下的切换效果（比如初始是绿色，hover变成红色），只需要调整渐变方向和hover的背景位置：

.box {
  /* 把渐变方向改成to top，让红色在下方，绿色在上方 */
  background-image: linear-gradient(to top, red 50%, green 50%);
}
.box:hover {
  /* 背景位置向下移动100%，让红色渐变移上来 */
  background-position: 0 100%;
}

内容的提问来源于stack exchange，提问作者user9248590