Домой / Рецепты CSS / Анимационный эффект загрузки текста CSS
Анимационный эффект загрузки текста CSS

Анимационный эффект загрузки текста CSS

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

Демо

HTML

<h1 class="loader">
 <span>A</span>
 <span>U</span>
 <span>S</span>
 <span>T</span>
 <span>I</span>
 <span>N</span>
</h1></pre>
<pre>

CSS

h1{
 line-height:0.5em;
 margin-top:100px;
}

h1.loader{
 text-align: center;
 text-transform: uppercase;
 font-family: 'Nunito', sans-serif;
 font-size: 4.6875em;
 color: transparent;
 letter-spacing: 0.01em;
}

.loader span{
 text-shadow:
 0 0 0 rgb(0, 127, 253);
 -webkit-animation: loading 0.85s ease-in-out infinite alternate;
}

@-webkit-keyframes loading {
 to {text-shadow:
 30px 0 100px rgb(255, 0, 0)
 ;}
}
.loader span:nth-child(2){
 -webkit-animation-delay:0.15s;
}
.loader span:nth-child(3){
 -webkit-animation-delay:0.30s;
}
.loader span:nth-child(4){
 -webkit-animation-delay:0.45s;
}
.loader span:nth-child(5){
 -webkit-animation-delay:0.60s;
}
.loader span:nth-child(6){
 -webkit-animation-delay:0.75s;
}
.loader span:nth-child(7){
 -webkit-animation-delay:0.90s;
}

Данный эффект загрузки текста реализован на чистом CSS, что дает возможность достаточно легко изменять скорость анимации и цветовое решение примера. HTML CSS h1{ line-height:0.5em; margin-top:100px; } h1.loader{ text-align: center; text-transform: uppercase; font-family: 'Nunito', sans-serif; font-size: 4.6875em; color: transparent; letter-spacing: 0.01em; } .loader span{ text-shadow: 0 0 0 rgb(0, 127, 253); -webkit-animation: loading 0.85s ease-in-out infinite alternate; } @-webkit-keyframes loading { to {text-shadow: 30px 0 100px rgb(255, 0, 0) ;} } .loader span:nth-child(2){ -webkit-animation-delay:0.15s; } .loader span:nth-child(3){ -webkit-animation-delay:0.30s; } .loader span:nth-child(4){ -webkit-animation-delay:0.45s; } .loader&hellip;

Обзор

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

Оценка

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

Рейтинг: 4.9 ( 1 голосов )
100

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

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

*