Блог

Главная - Вопросы по программированию - Динамическая анимация градиента фона CSS

Динамическая анимация градиента фона CSS

#css #css-animations

#css #css-анимации

Вопрос:

У меня есть страница с анимацией градиента фона.

 <div class="bg-gradient">

</div>

.bg-gradient {
    width: 400px;
    height: 240px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

Я хотел бы изменить цвета при загрузке страницы. Но это не работает.

 $(document).ready(function() {
  SetBackgroundColors();
});

function SetBackgroundColors() {
  $('.bg-gradient').css('background', 'linear-gradient(-45deg,'   GetRandomColor()   ','   GetRandomColor()   ','   GetRandomColor()   ','   GetRandomColor()   ')');
}

function GetRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Цвета действительно меняются, но анимация не применяется.
Вот скрипка.

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

1. сократите время работы с css с 15 секунд до 5 секунд. Я считаю, что это работает

2. @hamid Это не сработало.

3. вам также необходимо сбросить размер фона, иначе он вернется к режиму auto auto по умолчанию после обновления bg-image jsfiddle.net/dbosnr7m

4. Анимация работает нормально. Цвета градиента устанавливаются только один раз во время загрузки. Изменение цвета, которое вы видите, связано с анимацией. Попробуйте перейти к 1s. JS запускается только один раз — возможно, вы думали, что он должен был выполняться дольше. В любом случае, в нынешнем виде код в порядке. Попробуйте поместить фоновое изображение реального изображения вместо линейного градиента, и вы увидите, что оно движется.

5. установить только background-image вместо background

Ответ №1:

Как только вы обновите background значение, background-size оно также будет сброшено в нормальное состояние (любое значение коротких рук фактически сбрасывается), поэтому вам также необходимо сбросить / указать снова его значение или только сбросить background-image . 😉

 $(document).ready(function() {
  SetBackgroundColors();
});

function SetBackgroundColors() {
  $('.bg-gradient').css('background', 'linear-gradient(-45deg,'   GetRandomColor()   ','   GetRandomColor()   ','   GetRandomColor()   ','   GetRandomColor()   ')').css('background-size', '400% 400%');
}

function GetRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i  ) {
    color  = letters[Math.floor(Math.random() * 16)];
  }
  return color;
} 
 .bg-gradient {
    width: 400px;
    height: 240px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-gradient">

</div>

Метки: