3D текст с анимацией для сайта при помощи CSS3 | RUDEBOXВ сегодняшнем уроке мы рассмотрим достаточно простой эффект, а именно как можно реализовать объемный текст на сайте используя при этом тени. Но это еще не все, мы добавим небольшую анимацию, которая будет привлекать взор, ключевой особенностью является то, что текст легко изменить, не нужно специальных навыков при манипуляции текста. Нам понадобятся несколько правил css и небольшой фрагмент javascript, который поможет нам реализовать простую анимацию. Кроме этого вы можете подключить свой шрифт на усмотрение.

 

Автором донного творения является GreenSock. И так, давайте пошагово рассмотрим процесс реализации данного эффекта.

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

Шаг 1. HTML

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

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

3D текст с анимацией для сайта при помощи CSS3 | RUDEBOX

Шаг 2. CSS

Нам необходимо указать тени, именно при помощи их мы получим иллюзию объемности, мы установим цвет тени, уровень прозрачности и ширину:

Также мы устанавливаем необходимый размер текста.

Шаг 3. JavaScript

Нам необходимо чтобы текст постепенно трансформировался, с обычного текста в объемный, для этого нам понадобится небольшие правила js, мы установим простую постепенную анимацию, и ее скорость.

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

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