В этом руководстве обсуждаются концепции достижения эффекта пишущей машинки с помощью 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 в качестве шагов гарантирует, что анимация выполняется в несколько шагов. Короче говоря, вы можете указать количество кадров в анимации.
Демонстрация
