我正在制作一个带有动画链接文本背景的菜单。我想让链接文本"填满"用不同的颜色在鼠标上。这基本上很简单:"填充";颜色是渐变背景，链接文本有background-clip: text;设置，它的工作。
问题是链接文本有一个:after，其中包含一个图标，应该使用css转换动画(在这种情况下旋转)。after伪元素需要"填充"像链接文本一样使用颜色，就好像它是另一个"文字"一样。在链接文本中
在Firefox中工作得很好，但在Chrome中有一个问题:一旦任何转换开始，伪元素就会消失。无论进行何种变换(平移、旋转或其他)，after都消失了。在我看来，css转换和背景剪辑在某种程度上相互排斥，因为它在没有after转换的情况下工作得很好。
我尝试了位置、背景可见性和其他一些属性，但没有成功。
HTML:
<a href="#" class="link">
<span class="link-text">This is the text of the link</span>
</a>
CSS:
.link {
display: block;
width: 400px;
margin: 0 auto;
padding: 20px;
text-decoration: none;
font: 700 20px/1.5em sans-serif;
background: #eee;
}
.link-text {
background-image: linear-gradient(to right, #0a0, #0a0 50%, #333 50%, #333);
background-size: 200% 100%;
background-position: 100% 50%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: all 0.5s;
}
.link-text:after {
content: ' .x';
transition: all 0.5s;
display: inline-block;
}
.link:hover .link-text {
background-position: 0 50%;
}
.link:hover .link-text:after {
transform: rotate(180deg);
}
这里有一支笔可以玩:https://codepen.io/MPDoctor/pen/gOLobbN
在Firefox中工作，在Chrome中失败。
我已经没有主意了，任何帮助都会很感激!
这并不能解释Chrome/Edge中出现的问题，但这是一种变通方法，在实践中可能是OK的，具体取决于各种因素，如转换速度，因为人类可能不会注意到黑客。
after内容是可见的，如果它被赋予了一个颜色，当它被旋转，我们可以给它在悬停期间的深色，直到最后一分钟，我们给它石灰类型的颜色。所以我们使用CSS动画而不是过渡:
<head>
<style>
.link {
display: block;
width: 400px;
margin: 0 auto;
padding: 20px;
text-decoration: none;
font: 700 20px/1.5em sans-serif;
background: #eee;
}
.link-text {
background-image: linear-gradient(to right, #0a0, #0a0 50%, #333 50%, #333);
background-size: 200% 100%;
background-position: 100% 50%;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: all 0.5s;
}
.link-text:after {
content: ' .x';
display: inline-block;
animation-name: none;
}
.link:hover .link-text {
background-position: 0 50%;
}
.link:hover .link-text:after {
animation: rotate 0.5s linear 1;
animation-fill-mode: forwards;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
color: #333;
}
99% {
color: #333;
}
100% {
transform: rotate(180deg);
color: #0a0;
}
}
</style>
</head>
<body>
<a href="#" class="link">
<span class="link-text">This is the text of the link</span>
</a>
</body>