切换方向时线渐变不起作用

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;}

对于另一个箭头，我将每个“right”切换为“left” 这是它的 JSFiddle：https://jsfiddle.net/2eqt694v/ 有人知道如何解决这个问题吗？

Answer 1

这可能是因为背景已经左对齐。除非你指定 background-position;它的默认值为 top left。因为你的梯度没有改变 y 轴时，当您更改为

时没有明显差异

background-position: left center;

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

见https://jsfiddle.net/yraz3odt/

切换方向时线渐变不起作用

line-gradient not working when switchig direction

css

web-deployment