• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимация пишущей машинки с чистым CSS (Мануал для создания эффекта печатающей машинки на сайте)
Анимация пишущей машинки с чистым CSS
Kosten
Дата: Суббота, 2019-08-10, 22:00 | Сообщение 1
Онлайн
Администраторы
Сообщений:25115
Награды: 57


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

Чтобы добиться эффекта пишущей машинки, важно использовать моноширинный шрифт. Моноширинный шрифт вместе с действующей функцией animation-timing-function гарантирует, что на каждом шаге анимации будет отображаться только один символ. Некоторые примеры моноширинных шрифтов: Courier, Consolas, Roboto Mono и так далее.

Главным героем этой анимации является свойство animation-timer-function . Чтобы выглядеть как реалистичный эффект печати, мы хотим, чтобы анимация выталкивала по одному символу за раз. Мы не хотим, чтобы анимация была плавным движением из одного состояния в другое, потому что тогда она не будет выглядеть реалистично.



HTML

Код
<div class="monoshid-nogoshuga">
    <div class="monoshid-nogoshuga-text">Мерцающая, маленькая звезда.</div>
</div>

CSS

Код
.monoshid-nogoshuga {
    font-family: Courier, monospace;
    display: inline-block;
}

.monoshid-nogoshuga-text {
    display: inline-block;
   overflow: hidden;
   letter-spacing: 2px;
  animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    border-right: 4px solid orange;
    box-sizing: border-box;
}

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

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

Эффект печатания - хороший способ привлечь внимание пользователя. В основном используется в разделах героя на странице, он гарантирует, что пользователь узнает некоторые специальные моменты о сайте. Установка функции animation-timing-function в качестве шагов гарантирует, что анимация выполняется в несколько шагов. Короче говоря, вы можете указать количество кадров в анимации.

Демонстрация
Прикрепления: 3647225.png(2.9 Kb) · typewriter.zip(2.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимация пишущей машинки с чистым CSS (Мануал для создания эффекта печатающей машинки на сайте)
  • Страница 1 из 1
  • 1
Поиск: