0

Добрый день уважаемые. Подскажите, пожалуйста как реализовать анимацию перехода линейного градиента при background у дива, по клику на кнопку Пример

$("button").on("click", function(){
	$(".block").animate({background: "linear-gradient(to bottom, #4b5fff 60%, #ebebeb)"}, 1000);
})
.block{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: linear-gradient(to bottom, #0D343A 40%, #000); 
}
button{
  margin-top: 20px;
  width: 100px;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="block"></div>
<button></button>

Необходимо реализовать что б по клику на button из одного линейного градиента все перестроилось в другой за 1сек. Это вообще реально?

1 ответ 1

2

По клику добавляй кнопке класс , а этому классу напиши анимацию на css "@keyframes" c нужными точками и переходами

3
  • как быть если вместо дива у меня тег body? Перефразирую вопрос - Как по нажатию на кнопку менять тегу body линейный градиент ? Commented 6 апр. 2017 в 19:33
  • тоже самое что и с дивом , давать боди класс , котором описываешь анимацию , которая допустим сработает через 1-2 секунды и плавно меняет градиент , при добавлении класса анимация начнет работать
    – MoJlo4HuK
    Commented 6 апр. 2017 в 19:37
  • 2
    (css.yoksel.ru/animation-for-gradients) пример градиент анимации
    – MoJlo4HuK
    Commented 6 апр. 2017 в 19:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.