ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация печатного эффекта CSS для текста

Анимация печатного эффекта CSS для текста

Анимация печатного эффекта 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 эффекта ввода текста.

Демонстрация
2020-04-17 Загрузок: 1 Просмотров: 277 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar