Как можно сверстать блок с такой анимацией?
Creativo Arquitectos Web Interactions
(показала подруга-дизайнер, просто интересно).
Интересует, собственно, фон, а не надписи. Мне в голову не приходит ничего, кроме фонового gif или видео, ну или может можно как-то через svg исхитриться.
-
1Посмотрите фильтры в css– Sergey Glazirin18 июл 2018 в 7:22
-
@Sergey Glazirin Фильтры такого не сделают)– Heidel18 июл 2018 в 7:23
-
2А что если сделать три картинки, формата png и через css накидывать фильтр "hue-rotate".– Евгений Николаев18 июл 2018 в 10:07
-
Самая простая реализация - использование слайдера с тремя разными по цветам картинками и таким же эффектом.– De.Minov22 дек 2018 в 19:31
3 ответа
На мой взгляд тут три разных изображения, смена между ними происходит через css свойства mask, где сама маска задается анимированным svg файлом.
Это пустой блок с фоном из этой анимации: https://cdn.dribbble.com/users/418188/screenshots/4836269/creativo_arquitectos_web_interactions.gif так что тут нечего и верстать.