🔤💫 Текст, который «вау»: 28 CSS-хаков для создания залипательных эффектов

Привет, друзья! Я – Кирилл Мыльников, frontend-разработчик в ГК Юзтех. В этом материале мы разберем 28 примеров, изучим технологии и принципы CSS.

1. Explosive letter burst on hover hover

При наведении курсора на текстовый элемент запускается впечатляющая динамическая трансформация. Слова мягко увеличатся, а вокруг них разбегутся два сияющих кольца. Они будут расширяться, создавая эффект взрыва, постепенно растворяясь в пространстве. Этот динамичный визуальный эффект привлечёт внимание и добавит интерактивности вашему тексту.

Анимация основана на следующих функциях и определениях CSS:

• ::before и ::after: анимация прикреплены к этим элементам
• radial-gradient: Применяются к псевдоэлементам для имитации эффекта красочного всплеска.
• @keyframes burst: Анимирует псевдоэлементы для создания эффекта взрыва

Пример реализации можно посмотреть тут:

2. Dancing shadow

Интерактивная анимация придает тексту ожившую тень, которая исполняет грациозный танец вокруг букв. Диагональные перемещения теней, меняющих свой цвет, создают иллюзию объемного движения. Эффект основан на динамическом изменении параметров тени, плавно перетекающих из одного состояния в другое.

• text-shadow: Для создания цветных теневых слоев вокруг текста
• @keyframes shadow-dance: Анимирует свойство text-shadow для динамического смещения теней.

Пример реализации можно посмотреть тут:

3. Melting text

Визуальный эффект превращает статичный текст в текучую субстанцию, создавая иллюзию расплавленных букв, стекающих вниз по странице. Этот завораживающий эффект достигается с помощью комбинации фонового изображения с анимированным жидким паттерном и прозрачности текста, что создает впечатление плавного растворения букв в текучей среде.

• ::before: добавляет полупрозрачный слой для имитации начальной стадии
• ::after: псевдоэлемент: Добавляет размытую, выцветшую версию
• @keyframes melt: Анимирует основной текст, плавно покачиваясь вверх вниз, имитируя опускающиеся движения
• @keyframes drip: Анимирует псевдоэлементы, растягивая и создавая эффект капель

Пример реализации можно посмотреть тут:

4. Matrix

Эффект воссоздает культовое визуальное оформление мира «Матрицы», где символы японской катаканы в виде зеленого дождя стекают по экрану, имитируя цифровую реальность. Анимация основана на многослойном движении текстовых элементов, которые плавно трансформируются и перемещаются, создавая ощущение погружения в виртуальное пространство.

• text-shadow: Создает эффект свечения вокруг текста
• clip-path: Используется для обрезки частей текста ::before
• repeating-linear-gradient: Создает фон, похожий на дождь
• @keyframes rain: Обрабатывает вертикальное перемещение фона
• @keyframes glitch: Анимирует эффект текста.

Пример реализации можно посмотреть тут:

5. Text masking

Маска создает волшебное свечение текста, сквозь который проступает анимированный фон.

• color: transparent: Делает сам текст невидимым, отображается только фоновое изображение.
• background-clip: text: Обрезает фоновое изображение по форме текста.

Пример реализации можно посмотреть тут:

6. 3d spin

Объёмный текст словно парит в пространстве, медленно вращаясь и отбрасывая тень.

• text-shadow: Для придания тексту трехмерного вида используется множественные текстовые тени.
• transform: rotate(0deg): Устанавливает начальный угол поворота по оси Y

Пример реализации можно посмотреть тут:

7. Glitch effect

Цифровой вихрь разрывает текст на фрагменты, создавая реалистичные помехи и искажения.

• ::before и ::after. Создание дубликатов слоев текста. clip-path: polygon применяется к этим псевдоэлементам для маскировки определенных частей текста.

• transform: translate: Слегка смещает текст в разных направлениях, создавая эффект искажения.

Пример реализации можно посмотреть тут:

8. Neon glow

Текст пульсирует в ритме неоновых огней, переливаясь между белым и цвета фуксии.

• text-shadow: Создает эффект свечения с помощью нескольких слоев постепенно увеличивающегося размытия.
• @keyframes glow: Анимирует тени текста при смене цветов

Пример реализации можно посмотреть тут:

9. Wavy text

Завораживающая анимация превращает текст в морскую гладь, где каждая буква плавно качается на волнах, создавая реалистичный эффект прибоя и переливаясь в лучах виртуального солнца.

• @keyframes wave: применяет непрерывную волнообразную анимацию к каждой букве
• animation-delay: К каждой букве применяется задержка в 0.2 секунды, поэтому их анимация начинается немного позже предыдущей.

Пример реализации можно посмотреть тут:

10. Split text

Две половинки слова стремительно сходятся в центре, создавая эффект безупречного соединения из частей CON и JOINED.

• transform: translateX: Изначально размещает обе части текста за пределами экрана
• @keyframes slide-in-left: Перемещает левый текст с левого края в центральное положение
• @keyframes slide-in-right: Перемещает правый текст с правого края в центральное положение

• animation-fill-mode: forwards: Гарантирует, что текст останется на месте после окончания анимации

Пример реализации можно посмотреть тут:

11. Glowing 3D text

Объёмный текст парит в цифровом пространстве, излучая яркое свечение и медленно вращаясь в трёх измерениях.

• @keyframes mobble: Определяет 3D вращательные движения
• @keyframes glow: Определяет переходы цвета свечения
• text-shadow: Создают эффект свечения вокруг текста, применяя тень, которая меняет цвет во время анимации свечения

• translateZ: размещает каждый текстовый слой на разной глубине для создания эффекта наложения 3D

Пример реализации можно посмотреть тут:

12. 3D Animation

Текст HEY оживает в трёхмерном пространстве, наполняясь энергией пульсирующих оттенков и живых теней, создающих ритм, схожий с биением сердца

• Текстовые тени
• CSS-преобразования
• CSS-флексбокс

Пример реализации можно посмотреть тут:

13. 3D text marquee effect

Эффект 3D-текстовой полосы от Comehope представляет собой псевдо 3D-анимацию, создающую оптическую иллюзию движения текста через угол объемного бокса. Этот эффект достигается путем комбинирования перспективных трансформаций, хитрой обрезки и анимации полосы прокрутки.

• Перспектива и 3D-преобразования
• transform-origin: Обеспечивает вращение с правильной стороны

• @keyframes marquee: Определяет плавное движение текста по панелям.

Пример реализации можно посмотреть тут:

14. Nabla color font

Инновационный цветной шрифт Nabla от Скотта Келлума превращает обычный текст в захватывающее 3D-шоу. Каждая буква в слове COLOR FONTS! оживает в особом ритме: буквы пульсируют с разной интенсивностью, создавая впечатляющий объемный эффект. Шахматный порядок анимации и продуманные временные задержки формируют завораживающий каскадный эффект, который буквально оживляет текст.

• font-variation-settings: Регулирует глубину выделения шрифта Nabla для динамического изменения 3D глубины

• @font-palette-values: Применяет определенную цветовую палитру к вариативному шрифту для настройки его внешнего вида

Пример реализации можно посмотреть тут:

15. 3D-rotate

3D-анимация Эмилио демонстрирует текст EAT SLEEP RAVE, вращая его по оси X и формируя цилиндрическую структуру. Ключевые элементы CSS, задействованные в этой анимации:

• transform-style: preserve-3d: Гарантирует, что дочерние элементы сохраняют свое трехмерное позиционирование
• @keyframes animate: Вращает весь контейнер вокруг ОСИ X для создания эффекта непрерывного вращения

• transform: perspective: Создает иллюзию глубины и отдаляет объект от зрителя. Это делает 3D-сцену более реалистичной

Пример реализации можно посмотреть тут:

16. Slide-in text animations

Текстовая анимация с фоном от Yemon представляет собой усовершенствованный вариант классической вставки текста. Особенность этого решения заключается в динамической смене фона при каждом переключении текста, что создает впечатляющий визуальный эффект и эффективно привлекает внимание посетителей к контенту.

• roll: создает эффект появления и исчезновения текста

• bg: циклически переключает различные цвета фона

Пример реализации можно посмотреть тут:

17. A Gooey Marquee

A Gooey Marquee от Amit Sheen создает завораживающий эффект Gooey Marquee, где текст плавно вытекает из одной стороны светящейся стены и органично вливается в другую. Эта впечатляющая анимация, словно вырванная из фильма о привидениях, мастерски реализована с помощью CSS фильтров, создающих размытый эффект, и ключевых кадров @keyframes, обеспечивающих непрерывное горизонтальное движение текста.

Пример реализации можно посмотреть тут:

18. Ghosts and Ghouls

Ghosts and Ghouls от Sicontis представляет собой уникальную анимацию в виде иконки-привидения. В отличие от классических текстовых анимаций, где текст перемещается горизонтально, здесь основной акцент сделан на стилизованное изображение призрака, что придаёт эффекту особую атмосферность и выразительность.

• @keyframes ghostMove: Перемещает значок по экрану

• mix-blend-mode: exclusion: Создает динамический цветовой эффект, когда призрак проходит через текст

Пример реализации можно посмотреть тут:

19. Schitts Creek title animation

В анимации заголовка Schitt’s Creek от Роба элегантно сочетаются две текстовые группы: основное название Schitt Creek и надстрочный индекс s. Эффектная слайдовая анимация завершается изящным мерцанием надстрочного элемента, создавая запоминающийся визуальный акцент.

• pop-word: Заставляет слово вращаться и становиться видимым
• show: Заставляет слово постепенно проявляться от непрозрачности 0 до 1
• bar-scale: Появляется подстрочная черта s
• sparkle: Масштабирует и перемещает эффект блеска вокруг надстрочной буквы

• shimmer: Добавляет эффект свечения тени текста к надстрочному индексу

Пример реализации можно посмотреть тут:

20. Text frame border rotation

Анимация вращения текста от Фернандо Коэна создает впечатляющий эффект: буквы кружатся вокруг рамки изображения, а не просто скользят. При наведении курсора происходит волшебство CSS. Эффект достигается с помощью ключевых кадров frameMove и функции rotate(), которые управляют вращением каждого символа.

Пример реализации можно посмотреть тут:

21. Typewriter Effect

Эффект пишущей машинки Фрэнка Ино демонстрирует превосходную реализацию анимации набора текста с реалистичным мигающим курсором, создавая аутентичную атмосферу печатной машинки.

• @keyframes typewriter: Управляет эффектом печати, постепенно увеличивает ширину текста

• @keyframes blinkingCursor: Создает эффект мерцания курсора

Пример реализации можно посмотреть тут:

22. Typewriter text animation

Анимация пишущей машинки от Альваро Монторо представляет собой динамичный текстовый эффект с разнообразными вариантами мигающего курсора, основанный на последовательном появлении символов и реалистичной имитации процесса набора текста.

• @keyframes typing: Имитирует эффект печати
• @keyframes blink: заставляет курсор попеременно быть полностью видимым

Пример реализации можно посмотреть тут:

23. Gradient typing effect

Эффект градиентного набора текста от Jasmine G представляет собой элегантную реализацию текстовой анимации, где каждый символ появляется с плавным градиентным заполнением, создавая динамичный визуальный эффект на основе последовательных ключевых кадров.

• blink: Создает эффект мигающего курсора, переключая border-color между видимым и прозрачным состоянием

• type: Текст отображается по буквам, имитируя эффект набора текста.

Пример реализации можно посмотреть тут:

24. Editor illustration

В иллюстрации редактора от Klare реализовано множество интерактивных элементов, но ключевой особенностью является анимация набора текста, построенная на основных функциях и определениях CSS, обеспечивающих плавное появление символов и реалистичную имитацию процесса печати.

• cursor: persist обрабатывает эффект мерцания курсора, анимировав его border-color свойство

• SCSS имеет for циклы для генерации повторяющихся стилей и интерполяции с использованием

Пример реализации можно посмотреть тут -

25. The aurora

Анимация полярного сияния от Ostylowany использует впечатляющие возможности CSS для создания реалистичного эффекта северного сияния, основанного на динамическом взаимодействии цветовых градиентов и плавных анимационных переходов.

• mix-blend-mode: Чтобы цвета смешались там, где они накладываются друг на друга
• border-radius: Существует несколько значений радиуса границы, которые придают цветам органическую форму пятна.

• filter: blur(): Для мягкого, сияющего эффекта, который необходим для создания образа

Пример реализации можно посмотреть тут:

26. Text shadow animation

Эффектная анимация тени текста впечатляет двойным набором скользящих цветов, которые словно рисуют текст в воздухе. Этот завораживающий визуальный эффект создан с помощью продвинутых свойств CSS, где плавные переходы и динамическое изменение теней создают иллюзию объемного рисования букв.

• overflow: hidden: Создает маску резки для раскрытия

• @for цикл: создает ступенчатые задержки для анимации каждого слова

Пример реализации можно посмотреть тут:

27. Work/Life font animation

Креативная анимация шрифта Work/Life от Гаянэ Гаспарян представляет собой динамический текстовый эффект WORK LIFE BALANCE, используя вариативные шрифты. В этой анимации слова WORK и LIFE эффектно чередуются между толстым/широким и тонким/узким стилями, создавая визуальный баланс, который идеально отражает концепцию современного подхода к организации рабочего и личного времени.

Пример реализации можно посмотреть тут:

28. Breathe variable font animation

Анимация переменного шрифта Breathe от Type Forward создает завораживающий эффект, заставляя текст визуально «дышать» за счет динамического изменения весовой характеристики шрифта, что достигается с помощью плавных анимационных переходов и современных веб-технологий.

• font-variation-settings: Изменяет толщину шрифта с 100 на 900 жирного

• @keyframes latter-breathe: Анимирует изменения толщины шрифта создавая эффект дыхания

Пример реализации можно посмотреть тут:

При правильном использовании анимации CSS могут стать мощным инструментом для улучшения пользовательского опыта, но помните: меньше значит больше — сохраняйте баланс между эстетикой и функциональностью.