.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 bergantung pada flexbox, sehingga dapat mempengaruhi tata letak dalam pengujian
- Menganggap penggunaan Autoprefixer
- Lebar bekas teks akan ditentukan oleh panjang teks yang digunakan
- Menambah lebih banyak langkah ke dalam
typinganimasi akan meningkatkan kelancaran menaip - Sesuaikan
letter-spacingberdasarkan keluarga-font dan ukuran fon yang digunakan
Lagi!
Ada yang menggunakan JavaScript, yang kadang kala lebih disukai (secara harfiah menambahkan watak pada suatu masa terasa lebih seperti mesin taip sebenar) dan kadang-kadang tidak (kebimbangan kemungkinan aksesibilitas)
Lihat CSS murni animasi Pen Typewriter oleh Thiago Teles Pereira (@thiagoteles) di CodePen.
Lihat Pen JS Typewriter oleh Simon Shahriveri (@ hi-im-si) di CodePen.
Lihat mesin taip Pen oleh gavra (@gavra) di CodePen.
Lihat mesin taip Pen CSS oleh Danielgroen (@danielgroen) di CodePen.
Lihat Pen Tippy-tappy-typer oleh Stove (@stevn) di CodePen.
Lihat Pen CSS Menaip Beberapa Garis dengan Blinking Caret oleh Joeri Boudewijns (@Bojoer) di CodePen.