有没有办法在悬停时平滑地设置文本颜色的动画？

Question

我正在使用的设计包括一个按钮悬停，用颜色填充按钮。这是在初始状态下与填充颜色相同的文本。随着填充的进行，文本的颜色变为对比色，但是平滑。以下是设计师给我的一段视频，说明了这个问题：

你可以在字母'a'上看到它是两种不同的颜色。所以我不能逐个字母地改变文字的颜色。

有没有任何方法（JS / Jquery / whatever / CSS）来实现这个目的？我想不是，但也许有一些方法可以在整个文本中设置一个明显的渐变动画？我不知道。

Answer 1

我实际上在不久之前为另一个问题做过类似的事情。

这可以通过mix-blend-mode来实现。我还将时间减慢到5s，以便您可以清楚地看到它是如何工作的。在使用时将其更改为0.25s或满足您需求的任何内容。

a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  border: 3px solid #f16251;
  background: white;
  color: black;
  font-size: 30px;
  font-family: arial;
  mix-blend-mode: normal;
  overflow:hidden;
  z-index: 1;
}

a:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
  background: white;
  mix-blend-mode: difference;
  transform-origin:0 0 ;
  transform:translateX(100%);
  transition: transform 5s;
  z-index: 3;
}
a:hover:before {
  transform: translateX(0);
}

a:after{
  content: '';
  display:block;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  position: absolute;
  z-index: 100;
  background: #f16251;
  mix-blend-mode: screen;
}

<a href="#" class="btn">WoOoOoOoT</a>