切换方向时线路坡度不起作用

Question

我正在制作一个网站，箭头上的线条渐变有问题：我有两个箭头(每个方向一个(和一个线梯度。如果我把鼠标悬停在箭头上，渐变就会移动。这适用于向左看的箭头，但不适用于向右看的箭头。什么也没发生。这是工作箭头的css代码：

.AnimTextGradient1 {
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -webkit-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -moz-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -ms-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: -o-linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
background: linear-gradient(right, #ff8a00 0%, #e52e71 51%, #ff8a00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 0.5s;
background-size: 200% auto;
}   .AnimTextGradient1:hover {background-position: right center;}

对于另一个箭头右"；至">左"；以下是它的JSFiddle：https://jsfiddle.net/2eqt694v/有人知道如何解决这个问题吗？

Answer 1

这可能是因为背景已经左对齐。除非指定background-position；它的默认值将是CCD_ 2。因为你的梯度没有y轴的变化当你改变为时没有明显的差异

background-position: left center;

在您的代码中。我建议将背景锚定为.AnimTextGradient2中的另一个值center center/right center，或者在y轴上添加渐变。

参见https://jsfiddle.net/yraz3odt/