Анимация текста с использованием SVG и CSS3
Поиск

Анимация текста с использованием SVG и CSS3

Nikel, 01.05.2019
В данном уроке нам предстоит реализовать два красивых текстовых эффекта без использования скриптов и изображений. Как же мы будем это реализовывать?
Идея довольно проста, нужно создать  div с любым подходящим фоном, а внутри этого элемента мы помещаем объект SVG, содержащий текстовую маску. Пожалуй, создание SVG самое сложное здесь, поскольку для анимации будут в первом случае использоваться переходы (transition), а во втором — простейшая анимация CSS3 (animation).
В результате мы увидим текст со всеми стилями и эффектами, которые мы указали для div.

Градиентный текст

На изображении ниже показан внешний вид текста. Вы можете посмотреть как работает этот эффект, перейдя по ссылке Демонстрационного примера.

Демонстрационный пример

Разметка html

Рассмотрим какой код html нам нужно написать для работы этого примера. Тег с идентификатором #grad является контейнером для объекта SVG, заданного с размерами 100% по горизонтали и вертикали, чтобы занимать все пространство родительского элемента. Внутри svg мы пропишем тег mask, содержащий два объекта:  прямоугольник (rect) и отображаемый текст (text).

Без маски элемент rect  просто будет отвечать за отображение градиентного прямоугольника. Именно задание тега mask и указание атрибута mask в rect дает команду градиенту отображаться в области текста, остальные области прямоугольника как бы становятся невидимыми. По аналогии это как если бы мы взяли два листа бумаги белый и цветной, и вырезав на белом листе бумаги буквы, наложили сверху на цветной лист. Вот, что представляет собой маска.

CSS

Теперь применим  стили для получения нашего эффекта, они будут несложными: размеры надписи, градиент и положение градиента для div#grad и смещение положения градиента при наведении мыши, некоторые настройки текста. Также текст имеет прозрачность 50% и обводку 3px (100% непрозрачную), чтобы получить эффект контура. Для более плавного смещения  заливки при наведении на нее курсора указываем transition(переход) длительностью 1 секунда.

Вы можете задать свою собственную заливку для этого текста, например воспользовавшись специальным сервисом для создания градиентов. Мне нравится Ultimate CSS Gradient Generator от ColorZilla.

Полосатый текст

Демонстрационный пример

Код разметки практически такой же как в первом примере. Только тут размеры текстовой области чуть больше и для тега-контейнера зададим идентификатор striple.

Стили второго примера тоже несущественно отличаются от первого. Единственное существенное отличие это наличие CSS3 анимации. Она срабатывает при наведении мыши(опять мы используем стандартный псевдокласс :hover): симпатичные зеленые полоски бесконечно движутся по буквам пока вы не уберете с них курсор.

Выше у нас прописано стандартное правило @keyframes с именем Anim , указывающее ключевые кадры анимации.

А для псевдокласса :hover пропиcано свойство animation: длительность, тип анимации и ее название(то, что указано в keyframes).

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