линия-градиент не работает при переключении направления

#css #web-deployment

#css #веб-развертывание

Вопрос:

Я создаю веб-сайт, и у меня проблема с линейным градиентом на стрелке: у меня есть две стрелки (по одной в каждом направлении) с линейным градиентом. Если я наведу курсор на стрелку, градиент переместится. Это отлично работает для стрелки, смотрящей влево, но не для стрелки, смотрящей вправо. Ничего не происходит. Вот 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;}

Для другой стрелки я переключил все «вправо» на «влево»
Вот его краткое описание: https://jsfiddle.net/2eqt694v /
Кто-нибудь знает, как решить эту проблему?

1. to right …..

2. to right , не работает (показывает мне ошибку. Даже на JSfiddle). right работает только идеально. Проблема в левом. Я мог бы попробовать налево. Но тоже не работает.

3. developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient ()

Ответ №1:

Вероятно, это связано с тем, что фон уже выровнен по левому краю. Если вы не укажете background-position ; это значение по умолчанию будет top left . Поскольку ваш градиент не изменяется по оси y, при изменении на

 background-position: left center;

в вашем коде. Я бы рекомендовал либо привязать фон к другому значению, center center / right center in .AnimTextGradient2 , либо добавить градиент по оси y.

см. https://jsfiddle.net/yraz3odt /