Дайте совет, как правильно сделать анимацию css свойства filter: drop-shadow(0 0 14px цвет), через javascript?

Мне нужно сделать анимацию свойства filter: drop-shadow(0 0 14px red); на изображении формата png. Думал изначально сделать массив цветов из типа rbga, чтоб , было поэтапно, но как бы ничего не получилось. В этом скрипте я каждый раз в цикле присваиваю стиль и это не правильно получается каждый раз цвет пропадает и резко появляется. Может кто подсказать как сделать анимацию у меня должно быть 3 цвета : красный, синий и зелёный. На css через сценарии анимации тоже ничего не вышло. Благодарю за любой ответ.
Ссылка на codpen
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
MagnusDidNotBetray
@MagnusDidNotBetray
Самый елеустремленный человек
Что-то такое придумал
let clock = document.querySelector('.clock');
let arrColors = ['rgba(255, 0, 0, .1)','rgba(255, 0, 0, .2)','rgba(255, 0, 0, .3)','rgba(255, 0, 0, .4)','rgba(255, 0, 0, .5)','rgba(255, 0, 0, .6)', 'rgba(255, 0, 0, .7)', 'rgba(255, 0, 0, .8)','rgba(255, 0, 0, .9)', 'rgba(255, 0, 0, 1)'];

const changeColor = (color, delay) => {
  clock.style.filter = `drop-shadow(0 0 14px ${color})`;
  return new Promise((resolve) => setTimeout(resolve, delay));
}
setInterval(async function(func){
  for(let i = 0; i < arrColors.length; i++){
    await func(arrColors[i], 2000);
  }
}, arrColors.length * 2000, changeColor);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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