15 потрясающих анимированных эффектов для текста на CSS

274 198 любопытных

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

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

See the Pen <a href="http://codepen.io/yoksel/pen/XJbzrO/">Elastic stroke CSS + SVG</a> by yoksel (<a href="http://codepen.io/yoksel">@yoksel</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

See the Pen <a href="http://codepen.io/DirkWeber/pen/ArFvk/">SVG Glitch</a> by Dirk Weber (<a href="http://codepen.io/DirkWeber">@DirkWeber</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Ретро логотип

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

See the Pen <a href="http://codepen.io/hugo/pen/AFaiB/">Shop Talk logo made in CSS </a> by Hugo Darby-Brown (<a href="http://codepen.io/hugo">@hugo</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

See the Pen <a href="http://codepen.io/robertmesserle/pen/Lebco/">Slashed CSS Effect</a> by Robert Messerle (<a href="http://codepen.io/robertmesserle">@robertmesserle</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Длинная тень для текста

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

See the Pen <a href="http://codepen.io/juanbrujo/pen/yGpAK/">CSS3 text-shadow effects</a> by Jorge Epuñan (<a href="http://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

See the Pen <a href="http://codepen.io/andreas_pr/pen/QwLZVZ/">Foggy text effect</a> by andreas_pr (<a href="http://codepen.io/andreas_pr">@andreas_pr</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Маска для текста на SVG

See the Pen <a href="http://codepen.io/fixcl/pen/CHgrn/">SVG text mask</a> by Marco Barría (<a href="http://codepen.io/fixcl">@fixcl</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

See the Pen <a href="http://codepen.io/yoannhel/pen/sJpDj/">Text animation</a> by Yoann (<a href="http://codepen.io/yoannhel">@yoannhel</a>) on <a href="http://codepen.io">CodePen</a>.<br />

3d текст

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

See the Pen <a href="http://codepen.io/ThatGuySam/pen/CytDA/">Hit The Floor Text Effect</a> by ThatGuySam (<a href="http://codepen.io/ThatGuySam">@ThatGuySam</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

See the Pen <a href="http://codepen.io/Jintos/pen/crlxk/">-webkit-background-clip:text CSS effect </a> by Jintos (<a href="http://codepen.io/Jintos">@Jintos</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Мигающий текст

Тут мы можем видеть довольно приглушающий свет для текста, который к тому же ещё и периодически мигает.

See the Pen <a href="http://codepen.io/moklick/pen/tAlJB/">CSS Text-FX</a> by moklick (<a href="http://codepen.io/moklick">@moklick</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Анимированная подпись

Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.

See the Pen <a href="http://codepen.io/ghepting/pen/xnezB/">Animated signing of signature (SVG paths)</a> by Gary Hepting (<a href="http://codepen.io/ghepting">@ghepting</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

See the Pen <a href="http://codepen.io/mistic100/pen/zAren/">Colorful Glitchy 404</a> by mistic100 (<a href="http://codepen.io/mistic100">@mistic100</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Космос

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

See the Pen <a href="http://codepen.io/captainbrosset/pen/JoZabN/">COSMOS</a> by Patrick Brosset (<a href="http://codepen.io/captainbrosset">@captainbrosset</a>) on <a href="http://codepen.io">CodePen</a>.<br />

Загрузка

Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта

See the Pen <a href="http://codepen.io/igloude/pen/ByVYZK/">ByVYZK</a> by Ian Gloude (<a href="http://codepen.io/igloude">@igloude</a>) on <a href="http://codepen.io">CodePen</a>.<br />

CSS

#Похожее:

Анимированные фоны для сайта на CSS и JavaScript

Анимированные фоны для сайта на CSS и JavaScript

Эффекты при наведении

Крутые эффекты для сайта, которые реагируют на движение курсора на JS и CSS

gradient text

Как сделать градиент для текста на чистом CSS

10 CSS-фильтров для изображений с примерами кода

Интерактивные элементы

Вам и не снилось, что можно сейчас сделать на чистых CSS и HTML (С примерами)

Тень для элементов на сайте на чистом CSS и совершенно бесплатно

Крутые кнопки и формы для сайта на CSS

10 ретро игр, которые работают на HTML, JS и CSS

Скачать исходники 3D текста с анимацией

Scroll Up