伪元素的背景剪辑和转换使其在 Chrome 中消失答案

【问题标题】：Background-clip and transformation on a pseudoelement makes it disappear in Chrome伪元素的背景剪辑和转换使其在 Chrome 中消失
【发布时间】：2021-03-01 16:25:00
【问题描述】：

我正在制作一个带有动画链接文本背景的菜单。我想在鼠标悬停时用不同的颜色“填充”链接文本。这基本上很简单：“填充”颜色是渐变背景，链接文本设置了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 中失败。

我的想法不多了，我们将不胜感激！

【问题讨论】：

我注意到，如果你专门给它一个颜色（例如颜色：黑色），伪元素是可见的，并且它在悬停时旋转（边缘/铬）。
是的，但它必须有 color: transparent 才能看到“颜色填充”效果。
嘿，如果以后链接坏了，这个问题就没用了。就像 CodePen 一样，Stack Overflow 中有一个用于制作简单代码示例的功能。尝试改用这些。

标签： css background transform pseudo-element

【解决方案1】：

这并不能解释 Chrome/Edge 中出现的问题，但它是一种在实践中可能没问题的解决方法，具体取决于转换速度等各种因素，因为人类可能不会注意到黑客攻击。

如果在旋转时给它一个颜色，之后的内容是可见的，我们可以在悬停期间给它一个深色，直到最后一分钟我们给它一个石灰类型的颜色。所以我们使用 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>

【讨论】：

你可以保持使用transition也有淡出：jsfiddle.net/uoj4ycbL
动画不是一个坏主意，至少作为一种解决方法。 :-) 虽然有一个真正的解决方案会很好，但在我正在处理的项目中，有很多动画供用户选择，并且代码最少的解决方案将不胜感激:)