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

[Anonymous]

Я пишу простую веб -страницу, чтобы рекламировать вещи, которые я сделал, так что в основном моя страница Github, но с большей ценности презентации, также используя ее, чтобы получить больше тренировок с HTML, где, как я больше знаком с Python, Java и C. Эффект печати каждой буквы за раз, но она выполняет каждую строку моего абзаца одновременно, я хочу, чтобы весь текст выглядел так, как будто она печатается в режиме реального времени.

Я не совсем уверен, как это исправить. Я попытался избавиться от белого пространства: nowrap < /code>, но это просто заставляет весь абзац появляться как одна строка.

Избавление от переполнения: Hidden < /code> просто делает абзац очень тонким, а затем расширяет его. Я не совсем уверен, как получить желаемый эффект.

Код: Выделить всё

.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 0.4s step-end infinite alternate;
}

@keyframes cursor {
50% {
border-color: transparent;
}
}

@keyframes typing {
from {
width: 0;
}
}< /code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut faucibus quam, elementum semper magna. Duis in interdum leo, in pulvinar erat. Nulla eleifend felis fringilla dui fermentum, eget lobortis purus scelerisque. Aenean ante libero, iaculis eu est vitae, gravida luctus tortor. Vivamus vel lorem non mi porta efficitur quis et ante. Phasellus suscipit vitae tellus id tincidunt. Ut lacinia diam eu ipsum gravida aliquet. Donec id eros nec justo placerat consectetur. Ut accumsan quam neque. Sed vestibulum ligula quam, at maximus turpis rhoncus nec. Donec vel ex tellus. Nam interdum eget enim non ultrices. Aenean egestas sagittis posuere.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ml-and-css