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

Анимация печатного текста с помощью CSS

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

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

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

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

HTML

Код

<p class="nekingoun_reloking">Красивая анимация, как напечатать текст при помощи CSS3 стиля....</p>

CSS

Код

.nekingoun_reloking {
  width: 38em;
  color: #087931;
  font-size: 19px;
  font-family: 'Marck Script', cursive;
  white-space:nowrap;
  overflow:hidden;
  -webkit-animation: type 7s steps(50, end);
  animation: type 7s steps(50, end);
}
@keyframes type{
  from { width: 0; }
} @-webkit-keyframes type{
  from { width: 0; }
}

При обновление страницы, трюк начинает печатать вновь, а точнее с начала, это также при входе на страницу, где этот эффект будет находиться. Так как все будет работать на чистом стиле, вы можете задать шрифт. также цвет ему, не говоря сделать большим или маленьким по знаку. Ранее можно было найти такой трюк, который только мог вывести с помощью JavaScript, что можно также найти такой вид в сети.

Здесь все сделано на CSS3, что не так сильно будет нагрузка на страницу, точнее если сравнивать с ранее версией, то здесь по минимум после установки будет грузить. Но некоторые выводят на отдельные страницы, где красиво создают оформление под свою тематику.

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

09 Октября 2018 Просмотров: 1102 Комментариев: (0)

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

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

Kosten

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