我有一些使用 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>
顺便说一句,我正在使用样式化组件将其合并。任何想法将不胜感激!
最佳答案
它就这样工作了!我只需要停止使用 -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>
关于css - 我如何设置第一个字母的样式并应用此线性渐变动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54783325/