我的背景图像渐变文本转换不起作用

Question

我试图使用背景图像在文本上添加渐变，但悬停时转换到另一个渐变不起作用。

#footer .footer-newsletter .footer-top .contato {
font-size: 28px;
margin: 0 0 20px 0;
padding: 0;
line-height: 1;
font-weight: 600;
background-image: linear-gradient(90deg, #ffc746 20%, #f3bb3a 40%, #e7b02e 60%, #daa520 80%, #cd9a0e 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: 0.05em;
text-decoration: none;
-webkit-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#footer .footer-newsletter .footer-top .contato:hover {
background-image: linear-gradient(90deg, #cd9a0e 20%, #daa520 40%, #e7b02e 60%, #f3bb3a 80%, #ffc746 100%);
-webkit-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
} 

Answer 1

不幸的是，background-image当前不是"可动画化"；Mozilla表示：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

幸运的是，可能有一个潜在的解决方案。根据这个答案，您可以使用伪元素(:before和:after(与文本值的content相结合来实现类似的悬停效果。在CCD_ 6元素的CCD_ 5上使用转换可以向CCD_。

警告：我不知道这有多实用，因为你必须将所需的文本定义为一种样式，而不是在HTML中。

.test {
font-size: 28px;
margin: 0 0 20px 0;
padding: 0;
line-height: 1;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
cursor: pointer;
}
.test:before, .test:after {
content: "TESTING";
position: absolute;
background-clip: text;
-webkit-background-clip: text;
opacity: 1;
color: transparent;
}
.test:before {
background-image: linear-gradient(90deg, #ffc746 20%, #f3bb3a 40%, #e7b02e 60%, #daa520 80%, #cd9a0e 100%);
z-index: 1;
transition: opacity 0.5s;
}
.test:after {
background-image: linear-gradient(90deg, #cd9a0e 20%, #daa520 40%, #e7b02e 60%, #f3bb3a 80%, #ffc746 100%);
}
.test:hover:before {
opacity: 0;
}

<div class="test"/>