.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; ) )Погледајте Пен јрВвВМ Геофф Грахам (@геоффграхам) на ЦодеПен.
Напомене:
- Демо се ослања на флекбок, тако да то може утицати на изглед у тестирању
- Претпоставља употребу Аутопрефикер-а
- Ширина контејнера за текст одређује се дужином текста који се користи
- Додавање још корака
typingанимацији повећаће глаткост куцања - Прилагодите основу
letter-spacingна основу породице фонтова и величине фонта који се користе
Више!
Неки користе ЈаваСцрипт, што је понекад пожељно (дословно додавање карактера више делује као права писаћа машина), а понекад не (потенцијалне забринутости за приступачност).
Погледајте анимацију „Чивописне машине“, чист ЦСС, аутор Тхиаго Телес Переира (@тхиаготелес) на ЦодеПен-у.
Погледајте Пен ЈС писаћу машину Симона Схахриверија (@ хи-им-си) на ЦодеПен-у.
Погледајте машину Пен оловке гавра (@гавра) на ЦодеПен-у.
Погледајте машину Пен ЦСС писача Даниелгроен (@даниелгроен) на ЦодеПен-у.
Погледајте оловку Типпи-таппи-типер Стове (@стевн) на ЦодеПен-у.
Погледајте оловку ЦСС Куцање више линија с трепћућим каретом Јоерија Боудевијнса (@Бојоер) на ЦодеПен-у.