@ParaBellum577

Как сделать зацикленную анимацию градиента на иконках?

5ccfea895d9a1197309681.png
Суть вопроса: есть у меня 15 серых иконок расположенных в ряд. Нужно пустить по ним зацикленный градиент, вроде как блик чтобы пробегал слева на право. Как это можно реализовать? Просто не сталкивался ранее с таким вопросом. Иконки SVG
  • Вопрос задан
  • 267 просмотров
Решения вопроса 1
@h88p
Pre-Junior HTML Developer
Можете попробовать по циклу с задержкой им задавать цвет и поставить для каждого transition, должен получиться эффект, который вам нужен

setInterval(_=>{
   icons.forEach(function(element, i){
      setTimeout(function(){
         element.style.color = 'white'
         setTimeout(_=>{
              element.style.color = 'green'
          }, 400)
      }, 240 * ++i)
   });
}, icons.length*200 + 800)


Примерно так или как ответил человек в комментариях :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ParaBellum577 Автор вопроса
componentDidMount() {
    const icon = document.querySelectorAll('.icon-effect')
    let current = 0
    setInterval(() => {
      current = (current + 1) % icon.length
      icon[current].classList.toggle('active-icon')
    }, 3000)
   }


+ transition: 2.35s ease-in-out;
Получилось именно то, что и было нужно. Спасибо)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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