我如何设置第一个字母的样式并应用此线性渐变动画？

Question

我有一些使用 background-position 和 linear-gradient 的代码，以便在您将鼠标悬停在文本上时创建向右滑动的动画。

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div:hover {
  background-position: 0%;
}

<div>Baz</div>

我想将此功能与为我的元素的第一个字母着色的功能相结合，以便第一个字母被着色，然后在悬停时其余字母被着色。

我使用了 ::first-letter 伪元素，并且能够通过这种方式将颜色更改为紫色：

  div::first-letter {
    color: #8b73f6;
  }

<div>Foo</div>

但是，当我组合这些时，线性渐变总是胜出并位于我的颜色之上。我可以更改 div 上的 background-position 直到它只在第一个字母上显示颜色，但随后该解决方案仅适用于该特定字母，因为我没有使用等宽字体。

这是我对它们进行组合的尝试：

div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

<div>Bar</div>

顺便说一句，我正在使用样式组件将其合并。任何想法将不胜感激！

Answer 1

div:not(:hover)::first-letter {
    color: #8b73f6;
    background: linear-gradient(to right, red, green);
}

<div>Foo</div>

Answer 2

它就这样工作了！我只需要停止使用 -webkit-text-fill-color 并使用正常的 color。 answer 为我指明了正确的方向。

div {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient( to right, #8b73f6, #8b73f6 50%, #000 50%);
  background-size: 200% 100%;
  background-position: 100%;
  font-size: 1.5rem;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
}

div::first-letter {
  color: #8b73f6;
}

div:hover {
  background-position: 0%;
}

<div>Foo</div>

我如何设置第一个字母的样式并应用此线性渐变动画？

How can I style the first letter and apply this linear gradient animation?

css

css-animations

styled-components