ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект набора текста с использованием CSS3

Эффект набора текста с использованием CSS3

Теперь при помощи CSS3, вам не нужен плагин jQuery для создания эффекта набора текста, что здесь представлено 2 варианта на чистых стилях. Во многих функциях используют набор текста, так как это позволяет взглянуть на сам интернет ресурс, совершенно с другой стороны, так сказать прибавляет баллы. Но и безусловно на некоторых официальных сайтах он привлекается под управление, также идет как отличное объявление.

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

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

Первый вариант:

HTML

Код

<div class="wrapper">
<h1>Zornet.Ru - привет!<span> </span>
</h1>
</div>

CSS

Код

h1 {
  position: relative;
  float: left;
  color: #ffda6c;
  font-family: 'Inconsolata', Consolas, monospace;
  font-size: 3em;
}

h1 span{
  position: absolute;
  top: 0;
  right: 0;
  background: #1d1f20;
  width: 100%;
  border-left: .1em solid transparent;
  -webkit-animation: typing 3s steps(16) forwards,
  cursor 1s infinite;
  animation: typing 3s steps(16) forwards,
  cursor 1s infinite;
}

::selection{
  background: black;
}

@-webkit-keyframes typing{
  from { width: 100%;}
  to { width: 0;}
}
@-webkit-keyframes cursor{
  50% { border-color: white;}
}
@keyframes typing{
  from{ width: 100%;}
  to{ width: 0;}
}
@keyframes cursor{
  50% { border-color: white;}
}

Если вы перезагрузите страницу или снова на ее зайдете, то каждый раз все начинается с начало.

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

Второй вариант:

HTML

Код

<p>На сайте представлены элементы CSS, где подойдут под дизайн сайта.</p>
<p>Администратор: Kosten
<a href="/" title="CSS">ZorNet - портал для вебмастера</a>
:)<span>|</span></p>

CSS

Код

p{
  color: #37ec37;
  font-family: "Courier";
  font-size: 19px;
  margin: 8px 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  width: 53em;
  animation: type 5s steps(60, end);
}

p:nth-child(2){
  animation: type2 7s steps(60, end);
}

p a{
  color: #5bdbf1;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{
  from { width: 0; }
}

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}

Выставлены на темном фоне, где самостоятельно можно сменить палитру под любой фон, что находится на сайте.

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

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

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

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

Kosten

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