.typewriter h1 ( overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .15em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .15em; /* Adjust as needed */ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; ) /* The typing effect */ @keyframes typing ( from ( width: 0 ) to ( width: 100% ) ) /* The typewriter cursor effect */ @keyframes blink-caret ( from, to ( border-color: transparent ) 50% ( border-color: orange; ) )Вижте Pen jrWwWM от Geoff Graham (@geoffgraham) на CodePen.
Бележки:
- Демото разчита на flexbox, така че това може да повлияе на оформлението при тестване
- Приема използването на Autoprefixer
- Ширината на текстовия контейнер ще се определя от дължината на използвания текст
- Добавянето на повече стъпки към
typingанимацията ще увеличи плавността на писането - Регулирайте
letter-spacingвъз основа на използваното семейство шрифтове и размер на шрифта
Повече ▼!
Някои използват JavaScript, който понякога е за предпочитане (буквално добавянето на символ в даден момент се чувства по-скоро като истинска пишеща машина), а понякога не (потенциални проблеми с достъпността).
Вижте анимацията на писалката за писалка, чист CSS от Thiago Teles Pereira (@thiagoteles) на CodePen.
Вижте пишещата машина Pen JS от Саймън Шахривери (@ hi-im-si) на CodePen.
Вижте пишещата машина Pen от gavra (@gavra) на CodePen.
Вижте пишещата машина Pen CSS от Danielgroen (@danielgroen) на CodePen.
Вижте Pen Typepy-tappy-typer от Stove (@stevn) на CodePen.
Вижте Pen CSS Typing Multiple Lines with Blinking Caret от Joeri Boudewijns (@Bojoer) на CodePen.