Классный эффект появления текста

Классный эффект появления текста

Разбираем по шагам симпатичный эффект появления текста при наведении на чистом CSS.

Итоговый результат будет выглядеть вот так:

See the Pen pxYLWg by Mohnatus (@mohnatus) on CodePen.0

Шаг 1.

Сначала создадим контейнер и зададим общие стили:

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

Шаг 2.

Теперь добавим текст. Изначально на блоке будет отображаться слово «Hello».

Разместим его по центру с помощью абсолютного позиционирования контейнера и флекс-свойств и добавим некоторые стили:

Шаг 3.

Теперь добавим слово «World», которое изначально скрыто. При наведении на блок, оно будет эффектно появляться с левой стороны.

Зачем нам такая сложная структура, будет понятно чуть позже.

Добавим стили:

Свойство transition потребуется для плавного изменения свойств.

Для наглядности на скриншоте слово «Hello» скрыто, слово «World» видимо, а все свойства overflow: hidden закомментированы.

Шаг 4.

При наведении курсора на блок позиция слова «World» плавно изменяется:

Шаг 5.

Для большего эффекта немного уменьшим блок и будем его увеличивать при наведении:

Вот и все, эффект готов.

Этот эффект создан Полом Льюисом:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *