Как реализовать такую анимацию?

Question

[WebforSelf]

Есть в макете такой блок, хочу сделать его анимированным. В принципе вентиляторы крутиться легко заставить, а вот как пузырьки чтоб бегали и градиент по трубкам. Стоит вообще такое пытаться сделать на css?

Answer 1

[RAX7]

Comments

[WebforSelf]

Блин , кайф) спасибо)

Answer 2

[Матвей Тарасов]

Картинка свг ?
Пузырьки в каждой отдельной трубке по прямой просто гоняешь, можно их жс-ом генерить, можно сделать svg, положить её бэкграундом и двигать по оси, врубив репит, извращений можно придумать много)
Градиенты по трубкам опять же спанами сверху сделать, можно через svg анимацию бахнуть, проще конечно прямоугольники двигать, которые будут видны только на определенном слое

Answer 3

[WebEagle]

Проблема в пузырях, если реализовывать красиво - лучше JS + CANVAS. В рамках в фафанчик делать - стоит для получения опыта. Если Сроки сжаты и не хочется облажаться - тогда запариваться не стоит))
По-хорошему, время много убьешь если опыта нет, при учете сделать красиво и хорошо

Comments

[WebforSelf]

да вот все решает время)