Анимация печатного эффекта CSS для текста
 | |
| Эффект печатного текста на страницы сайта всегда впечатляет оригинальностью, где вашему вниманию один вариант, который выстроен на чистом CSS3. Ведь при открытии сайта мы автоматически замечает, то что движется, а точнее анимацию, что для современного сайта стало простой обыденностью. Но все таки печатный эффект всегда привлекает больше внимание, чем простой анимированный баннера. А если он идет на чистом стиле, то вы еще не будете нагружать страницу, что считаю большим плюсом для любого интернет ресурса. И здесь можно сделать такой эффект по разному направлению, это поставить на главную страницу под название сайта, где сразу можно задать именно ту скорость появление знаков, которая вам необходима. А также многие создают отдельные страницы, где только в своей основе идет одно направление, что под название или краткого описание, только в том случай, если скорость открытие или появление знаков большая, то будет интересно смотреться. При проверке анимационного трюка, все отлично работает.  Установка: HTML Код <p>Здесь находится описание, которое появится на экране при эффекте печатной машины</p> CSS Код p { border-right: solid 3px rgba(35, 255, 35, 0.75); white-space: nowrap; overflow: hidden; font-family: 'Source Code Pro', monospace; font-size: 28px; color: rgba(255, 255, 255, 0.7); } /* Animation */ p { animation: animated-text 4s steps(29,end) 1s 1 normal both, animated-cursor 600ms steps(29,end) infinite; } /* text animation */ @keyframes animated-text{ from{width: 0;} to{width: 472px;} } /* cursor animations */ @keyframes animated-cursor{ from{border-right-color: rgba(0,255,0,.75);} to{border-right-color: transparent;} } Так как этот эффект на сайте не первый, то рекомендую посмотреть еще небольшую подборку текстовой анимации, виде печатных букв или знаков, где можно поставить под заданный класс в отличие от этого CSS эффекта ввода текста. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |