.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; ) )CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen jrWwWM'ye bakın.
Notlar:
- Demo, flexbox'a dayanır, bu nedenle test sırasında düzeni etkileyebilir
- Autoprefixer kullanıldığını varsayar
- Metin kabının genişliği, kullanılan metnin uzunluğuna göre belirlenecektir.
typingAnimasyona daha fazla adım eklemek , yazmanın düzgünlüğünü artıracaktır.letter-spacingKullanılan yazı tipi ailesine ve yazı tipi boyutuna göre ayarlayın
Daha!
Bazıları, bazen tercih edilebilen (kelimenin tam anlamıyla bir karakter eklemek gerçek bir daktilo gibi hissettirir) ve bazen de (potansiyel erişilebilirlik endişeleri) olmayan JavaScript kullanır.
CodePen'de Thiago Teles Pereira'nın (@thiagoteles) Kalem Daktilo animasyon saf CSS'sini görün.
CodePen'de Simon Shahriveri'nin (@ hi-im-si) yazdığı Pen JS Daktilosunu görün.
CodePen'de gavra (@gavra) tarafından kalem daktilosuna bakın.
CodePen'de Danielgroen (@danielgroen) tarafından hazırlanan Pen CSS daktilosuna bakın.
CodePen'de Stove (@stevn) tarafından üretilen Pen Tippy-tappy-typer'a bakın.
CodePen'de Joeri Boudewijns (@Bojoer) tarafından Yazılan Yanıp Sönen İmleçle Birden Çok Satır Yazma konusuna bakın.