.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; ) )Lihat Pen jrWwWM oleh Geoff Graham (@geoffgraham) di CodePen.
Catatan:
- Demo mengandalkan flexbox, sehingga bisa memengaruhi tata letak dalam pengujian
- Mengasumsikan penggunaan Autoprefixer
- Lebar wadah teks akan ditentukan oleh panjang teks yang digunakan
- Menambahkan lebih banyak langkah ke
typinganimasi akan meningkatkan kelancaran pengetikan - Sesuaikan
letter-spacingberdasarkan font-family dan font-size yang digunakan
Lebih!
Beberapa menggunakan JavaScript, yang terkadang lebih disukai (secara harfiah menambahkan karakter pada suatu waktu terasa lebih seperti mesin tik sungguhan) dan terkadang tidak (potensi masalah aksesibilitas).
Lihat animasi Pen Typewriter CSS murni oleh Thiago Teles Pereira (@thiagoteles) di CodePen.
Lihat Mesin Ketik Pena JS oleh Simon Shahriveri (@ hi-im-si) di CodePen.
Lihat mesin ketik Pena oleh gavra (@gavra) di CodePen.
Lihat mesin tik Pen CSS oleh Danielgroen (@danielgroen) di CodePen.
Lihat Pen Tippy-tappy-typer by Stove (@stevn) di CodePen.
Lihat Pena CSS Mengetik Beberapa Garis dengan Blinking Caret oleh Joeri Boudewijns (@Bojoer) di CodePen.