Блог

Главная - Вопросы по программированию - Плавное изменение цвета слева направо при наведении

Плавное изменение цвета слева направо при наведении

#css #animation #transition

#css #Анимация #переход

Вопрос:

Это мой простой код :

 li::after {
  height: 2px;
  display: block;
  background: rgb(195, 195, 195);
  border-right: 1px white;
  content: '';
}


li:hover:after {
   position: relative;
   transition: 3s ease;
   height: 2px;
   display: block;
   background: rgb(34, 130, 193);
   border-right: 1px white;
   content: '';
}

Теперь моя цель — сделать так, чтобы линия плавно меняла цвет СЛЕВА НАПРАВО. Но то, как я это написал, просто плавно меняет цвет. Я хочу дать ему направление, есть ли какой-нибудь простой способ сделать это?

Спасибо.

РЕДАКТИРОВАТЬ: я ищу такое поведение. Просто чтобы дать вам представление о том, как это должно выглядеть.

Ответ №1:

Является ли linear-gradient (color1, color2) тем, что вы ищете?

http://www.w3schools.com/css/css3_gradients.asp

Комментарии:

1. Я думаю, что нет. Смотрите ссылку в РЕДАКТИРОВАНИИ.

2. Кажется невозможным выполнить переход по градиенту. Вы можете добиться этого, изменив непрозрачность вспомогательного элемента. Я обновил вашу скрипку в качестве примера: jsfiddle.net/0ou3o9rn/23