Интересный эффект анимации текста с помощью CSS3 RUDEBOXЯ не раз уже утверждал, что типографика на сайте является одним с важнейших элементов на сайте. Правильно подобранная стратегия соотношения шрифта и цвета позитивно влияет на посетителей. Кроме этого, в последнее время, стали популярны различные авторские шрифты, которые придают сайту особую изюминку. В данном уроке мы рассмотрим процесс создания анимации для фона в тексте. Другими словами, мы будем проводить эксперименты со свойством clip text. Получилось достаточно привлекательно.


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

Шаг 1. HTML

Мы будем использовать достаточно простую разметку, с заголовком текста h3.

Для анимации мы будем использовать класс “it-animate”.

Пример 1

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

В первом примере мы хотим добавить два фоновых изображений. Изначально на необходимо, чтобы изображение, заполнило все слова, поэтому мы установим фон размере 100%.  Это означает, что изображение сохранит свои пропорции.

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

Далее нам необходимо добавить тени, и небольшие переходи анимации изображения:

С этим примером закончили. Переходим к следующему.

Пример 2

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

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

Фона размер для градиентов будет в три раза больше наших слоев в длину и высоту.

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

Для Firefox мы будем анимировать тени в соответствии с цветом текста.

Пример 3

Интересный эффект анимации текста с помощью CSS3 RUDEBOX

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

Мы также изменить уровень прозрачности значения RGBA, а также добавить некоторые переходы теней для Firefox:

Надеюсь вам понравился данный эксперимент с фоном текста. И вы найдете вдохновение для своих работ.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: