滑动动画文字颜色变化

Question

我有一个按钮,在悬停时右侧有一个背景颜色幻灯片,工作正常,但我需要更改文本颜色.我设法让它褪色,但这不能正常工作.我想要的是从右侧开始的颜色过渡幻灯片与背景变化一致.

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

我已经看到了这个问题,但在这种情况下唯一的解决办法是不可行的. 滑动改变文本颜色动画

我缺少一些CSS技巧吗？谷歌搜索不会导致任何指向正确的方向,所以我担心我正在尝试不可能的事情.

我很乐意使用JS或jQuery,如果它能实现我想要的.

Answer 1

这可以通过"将文本与背景组合"来完成,关键是属性背景剪辑,检查出来:

.slideybutton { 
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, blue 50%, white 50%),
                    linear-gradient(to right, white 50%, blue 50%);
  transition: background-position 1s linear; 
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box; 
  color: transparent; 

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

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>