Code Ready | Frontend
CSS-приём — анимированная заливка текста!
В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора.
Как работает:
• data-text хранит копию строки, которую использует псевдо-элемент для заливки;
• ::before накладывается поверх и начинается с ширины 0, скрывая часть текста;
• Анимация плавно увеличивает width, открывая символы один за другим;
• border-right добавляет небольшой “курсор”, усиливая ощущение движения.
Трюк отлично показывает силу псевдо-элементов: один дублирует контент, второй управляет визуальным сценарием!
Code Ready | #фишка Если у вас установлено приложение,
вы можете сразу перейти в канал