Попытка получить напечатанный эффект для моего личного веб -сайта в HTML ⇐ Html

[Anonymous]

Итак, я пишу простую веб -страницу для рекламы, которые я сделал, так что в основном моя страница GitHub, но с большей ценности презентации, также используя ее, чтобы получить больше практики с HTML, где, как я больше знаком с Python, Java и C. < /p>
в любом случае, у меня есть «раздел героев», который является просто коротким бакафом, где я ввожу себя и мои таланты. .hero {
overflow: hidden;
margin: 0 auto 16px; /* centers block-level paragraph */
max-width: 100ch;
line-height: 1.5;
width: 100%;
white-space: nowrap;
text-align: center;
animation: typing 2s steps(400),cursor .4s step-end infinite alternate;
}
@keyframes cursor {
50% {border-color: transparent}
}
@keyframes typing {
from {width: 0}
}
< /code>
Это имеет желаемый эффект, набирая каждую букву в один раз, но она выполняет каждую строку моего абзаца одновременно, я хочу, чтобы весь текст выглядел так, как будто он был напечатан в режиме реального времени. Я не совсем уверен, как это исправить. Я попытался избавиться от «Белого пространства: Nowrap», но это просто делает весь абзац выглядеть как одна строка. Избавление от переполнения: Hidden просто делает абзац очень тонким, а затем расширяет его. Я не совсем уверен, как получить желаемый эффект.

Подробнее здесь: https://stackoverflow.com/questions/797 ... te-in-html