Данный эффект загрузки текста реализован на чистом 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; }
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!