Как сделать анимацию фона собирающуюся в круг + изменение цвета текста?

Question

[biz53]

Подскажите, с помощью чего можно это реализовать? Не обижусь, если прикрепите рабочие примеры)

Answer 1

[RAX7]

Текст придется дублировать и обрезать clip-path`ом.
Без дублирования можно попробовать поиграть с mix-blend-mode, но я сомневаюсь, что найдется подходящий режим наложения для данного случая.

Comments

[biz53]

Спасибо за clip-path. Вроде как сделал. Только круг с помощью transform: scale сделал.

[biz53]

Только вот с кроссбраузерностью будут проблемы, возможно есть какие-то полифилы для lip-path?

[RAX7]

biz53, у SVG с этим получше, для однострочного текста вполне можно использовать
https://developer.mozilla.org/en-US/docs/Web/SVG/E...

Answer 2

[Роман Якимчук]

Вообще, это сложность для веб, управлять не прямоугольной графикой.

Как вариант, внутри разместить круглый синий круглый блок (border-radius 50%), который будет намного больше родительского контейнера, и будет скрыт за его границами, т.е. визуально будет видно прямоугольник. При наведении делается transform: scale, и он уменьшается до нужных размеров. Фон родительского контейнера сделать серым.

Правда, всё зависит от анимации которая вам требуется.

И, вот этот текст, чтобы под блоком был белый, а дальше черный. Попробуйте вот это: https://developer.mozilla.org/en-US/docs/Web/CSS/f...

Comments

[biz53]

Больше вопросов как раз-таки было по тексту.
Тоже думал насчет круга внутри блока + overflow: hidden