Как сделать плавный переход линейного градиента в js?

Есть некий блок, у которого есть свойство background: linear-gradient(to top, #bc9155, #d39e54); Как сделать плавный переход на другие цвета, если свойство transition почему-то не работает?
  • Вопрос задан
  • 548 просмотров
Пригласить эксперта
Ответы на вопрос 2
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Угу, не работает transition с линейным градиентом.
И JS тут совсершенно не при чем %) Делается небольшим костылем на CSS.
Самое простое, использовать блок с абсолютным позиционированием.
https://jsfiddle.net/webirus/0sn1fwet/
Я сделал через псевдоэлемент, так как у меня не заполнен контент.
В случае, если контент есть, просто делайте отдельный див.
Ответ написан
Комментировать
mudrenokanton
@mudrenokanton
frontend dev
Да, есть несколько вариантов. Можно делать через opacity, как вам показали выше.
Можно еще сделать контейнер градиента шире, растянуть, обрезать, а потом двигать. Получается более плавный и красивый эффект:
codepen.io/georgehastings/pen/xgwxgo
И еще можно все сделать на canvas сменой кадров.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы