Домой / Рецепты CSS / Анимационное заполнение текста используя CSS
Анимационное заполнение текста используя CSS

Анимационное заполнение текста используя CSS

Анимация заполнения текста происходит благодаря загрузке фонового изображения. Сменить изображение которое заполняет текст можно изменив свойства p span, указав в background ссылку на новое изображение.

Эффект анимации достигается благодаря использованию только CSS свойств, что дает возможность достаточно легко изменять стили под себя.

Демо

HTML

<!-- Google Font -->
<link href="http://fonts.googleapis.com/css?family=Oswald:700|Neuton" rel="stylesheet" type="text/css">
<p>Spice up your type with CSS <span>Animated text fill</span> &mdash; no JavaScript required &mdash;</p>

CSS

body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }

p {
 text-transform: uppercase;
 letter-spacing: .5em;
 display: inline-block;
 border: 4px double rgba(255,255,255,.25);
 border-width: 4px 0;
 padding: 1.5em 0em;
 position: absolute;
 top: 18%;
 left: 50%;
 width: 40em;
 margin: 0 0 0 -20em;
}

p span {

 font: 700 4em/1 "Oswald", sans-serif;
 letter-spacing: 0;
 padding: .25em 0 .325em;
 display: block;
 margin: 0 auto;
 text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

 background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
 -webkit-background-clip: text;

/* Animate Background Image */

 -webkit-text-fill-color: transparent;
 -webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

 -webkit-transform: translate3d(0,0,0);
 -webkit-backface-visibility: hidden;
}

/* Animate Background Image */

@-webkit-keyframes aitf {
 0% { background-position: 0% 50%; }
 100% { background-position: 100% 50%; }
}

Анимация заполнения текста происходит благодаря загрузке фонового изображения. Сменить изображение которое заполняет текст можно изменив свойства p span, указав в background ссылку на новое изображение. Эффект анимации достигается благодаря использованию только CSS свойств, что дает возможность достаточно легко изменять стили под себя. HTML CSS body { font: 400 1em/1.5 &quot;Neuton&quot;; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 } p { text-transform: uppercase; letter-spacing: .5em; display: inline-block; border: 4px double rgba(255,255,255,.25); border-width: 4px 0;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.88 ( 2 голосов )
100

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

Ваш email не будет опубликован.

*