» »

Эффект печатающегося текста на чистом CSS

Эффект печатающегося текста на чистом CSS

Здесь вашему вниманию представлена два простых варианта по созданию печатного текста, который полностью будет использоваться при помощи CSS. Красивая анимация всегда привлекает внимание, здесь же мы изначально закладываем смысл выводимого описание, оно может быть кратким, как примеру название сайта, также можно выставить небольшое описание, которое несет тематическое наклонение сайта.

Вероятно вы уже встречались с такими эффектами, как просматривали, так и материал, но в большинстве случаев он идет с javascript. Но в нашем материале как видим все 2 варианта идут на чистом стиле CSS. Просто еще одна реализация стилистики для анимации ввода текста с использованием псевдоэлементов и анимации CSS3.

Где изначально задаем знаки в HTML, но в самих стилях идет дизайн, также можно выставить скорость, это с каким промежутком станет появляться знак. Эффект впечатляющий, который не сложно реализовать, где можно посмотреть на demo странице, как изначально выглядит, хотя как поняли из описания, что все отлично редактируется под каждый стиль.

Есть много вариантов для анимированного набор печати, где текст прописывают в CSS, и совершенно другая анимация, так что можете посмотреть и выбрать тот метод, который больше подходит.

Приступаем к установке:

Создайте в CSS эффект ввода текста

Создание анимации для печатающегося текст:

HTML

Код
<div class="satodsan-uvemopag">
  <h1>Эффект печатающегося текста</h1>
</div>

CSS

Код
.satodsan-uvemopag h1 {
  color: #eaeaf9;
  font-family: monospace;
  overflow: hidden;
  border-right: .17em solid #e29508;  
  white-space: nowrap;  
  margin: 0 auto;  
  letter-spacing: .17em;
  animation:  
  typing 3.5s steps(30, end),
  blink-caret .7s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }

На этом все, здесь как видим на чистом стиле выводит знаки.

Демонстрация

Анимация появления текста css

Способ создания эффекта печатающегося текста:

HTML

Код
<p class="dsongentom desetungavon">Пишущая машинка анимация чистый CSS</p>

CSS

Код
.dsongentom{
  position: relative;
  top: 50%;  
  width: 30em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255,.75);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);  
}

.desetungavon{
  animation: typewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.75);}
  to{border-right-color: transparent;}
}

Немного похожий на первый вариант, но с небольшими изменениями. Вообще при правильном использовании CSS-анимация у вас появляется возможность как можно больше добавить интереса и индивидуальность интернет ресурсу.

Демонстрация
2019-01-03 Загрузок: 1 Просмотров: 268 Комментарий: (0)

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

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

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