Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 14 июля 2026 г.
Анимированная радиальная маска на тексте через CSS — 14 июля 2026 г. в 06:13:14.547
Анимированная радиальная маска на тексте через CSS Если делаете запоминающиеся заголовки или интерактивные обложки, эта техника пригодится. Тут показали, как повторить на CSS эффект из блога Nikhil: слово «Hello!» перекрывается концентрическими кругами, и получается живое «просвечивание» текста. Суть — mask плюс repeating-radial-gradient. Прозрачные участки градиента скрывают буквы, непрозрачные оставляют. Чтобы понять механику, автор советует заменить радиальный градиент на linear-gradient — сразу видно, как альфа-канал управляет видимостью. Шрифт тоже важен: круглая буква «o» держит кольца ровно, поэтому взяли Fredoka. Можно сохранить в закладки и поиграть с параметрами в CodePen из статьи.