.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; ) )Vea el Pen jrWwWM de Geoff Graham (@geoffgraham) en CodePen.
Notas:
- La demostración se basa en flexbox, por lo que podría afectar el diseño en las pruebas
- Asume el uso de Autoprefixer
- El ancho del contenedor de texto estará determinado por la longitud del texto que se utilice
- Agregar más pasos a la
typinganimación aumentará la suavidad de la escritura. - Ajuste el
letter-spacingsegún la familia de fuentes y el tamaño de fuente que se esté utilizando
¡Más!
Algunos usan JavaScript, que a veces puede ser preferible (agregar literalmente un carácter a la vez se siente más como una máquina de escribir real) y otras veces no (posibles problemas de accesibilidad).
Vea la animación de Pen Typewriter con CSS puro de Thiago Teles Pereira (@thiagoteles) en CodePen.
Vea la máquina de escribir Pen JS de Simon Shahriveri (@ hi-im-si) en CodePen.
Vea la máquina de escribir Pen de gavra (@gavra) en CodePen.
Vea la máquina de escribir Pen CSS de Danielgroen (@danielgroen) en CodePen.
Vea Pen Tippy-tappy-typer de Stove (@stevn) en CodePen.
Vea el CSS del lápiz escribiendo varias líneas con Caret parpadeante de Joeri Boudewijns (@Bojoer) en CodePen.