.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; ) )Xem Pen jrWwWM của Geoff Graham (@geoffgraham) trên CodePen.
Ghi chú:
- Demo dựa trên flexbox, vì vậy điều đó có thể ảnh hưởng đến bố cục trong thử nghiệm
- Giả sử sử dụng Autoprefixer
- Chiều rộng của vùng chứa văn bản sẽ được xác định bởi chiều dài của văn bản đang được sử dụng
- Thêm nhiều bước vào
typinghoạt ảnh sẽ tăng độ mượt mà khi gõ - Điều chỉnh
letter-spacingdựa trên họ phông chữ và kích thước phông chữ đang được sử dụng
Hơn!
Một số sử dụng JavaScript, đôi khi có thể thích hợp hơn (theo nghĩa đen là thêm một ký tự vào một thời điểm cảm thấy giống như một máy đánh chữ thực sự) và đôi khi thì không (lo ngại về khả năng tiếp cận).
Xem hoạt ảnh CSS thuần túy của Pen Typewriter của Thiago Teles Pereira (@thiagoteles) trên CodePen.
Xem Máy đánh chữ Pen JS của Simon Shahriveri (@ hi-im-si) trên CodePen.
Xem Máy đánh chữ Pen của gavra (@gavra) trên CodePen.
Xem máy đánh chữ Pen CSS của Danielgroen (@danielgroen) trên CodePen.
Xem Pen Tippy-tappy-typer by Stove (@stevn) trên CodePen.
Xem Bút viết CSS nhiều dòng với dấu nháy nháy của Joeri Boudewijns (@Bojoer) trên CodePen.