.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; ) )Voir le Pen jrWwWM de Geoff Graham (@geoffgraham) sur CodePen.
Remarques:
- La démonstration repose sur flexbox, ce qui pourrait affecter la mise en page lors des tests
- Suppose l'utilisation d'Autoprefixer
- La largeur du conteneur de texte sera déterminée par la longueur du texte utilisé
- L'ajout d'étapes supplémentaires à l'
typinganimation augmentera la fluidité de la frappe - Ajustez le en
letter-spacingfonction de la famille de polices et de la taille de police utilisées
Suite!
Certains utilisent JavaScript, ce qui peut parfois être préférable (ajouter littéralement un caractère à la fois ressemble plus à une vraie machine à écrire) et parfois pas (problèmes d'accessibilité potentiels).
Voir l'animation Pen Typewriter pur CSS par Thiago Teles Pereira (@thiagoteles) sur CodePen.
Voir la machine à écrire Pen JS de Simon Shahriveri (@ hi-im-si) sur CodePen.
Voir la machine à écrire Pen de gavra (@gavra) sur CodePen.
Voir la machine à écrire Pen CSS de Danielgroen (@danielgroen) sur CodePen.
Voir le Pen Tippy-tappy-typer de Stove (@stevn) sur CodePen.
Voir le stylet CSS tapant plusieurs lignes avec un curseur clignotant par Joeri Boudewijns (@Bojoer) sur CodePen.