Generador de efecto máquina de escribir en CSS
Genera al instante el CSS de una animación que escribe letra a letra
Escribe tu frase, ajusta la velocidad y el color del cursor y obtén, con vista previa incluida, el código de un efecto de tecleo hecho con CSS puro. Es perfecto para desarrolladores y diseñadores que quieren animar el titular de una landing, la presentación de un portfolio o el texto de un banner. Todo el cálculo y la vista previa ocurren dentro del navegador, así que el texto que escribes no se envía a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Escribe en el campo el texto que quieres animar.
- Ajusta el deslizador de velocidad de escritura y el color del cursor mientras compruebas la vista previa.
- Decide si quieres que se repita en bucle y vuelve a ver la animación con el botón de reproducción.
- Copia el código CSS y HTML resultante y pégalo en tu proyecto.
Preguntas frecuentes
- ¿Puedo pegar el código generado en cualquier sitio web?
- Sí. Está hecho únicamente con CSS y HTML puros, así que puedes pegarlo y usarlo directamente sin ninguna librería.
- Si cambio el número de caracteres, ¿hay que generar el código otra vez?
- Sí. El valor de steps() se calcula automáticamente según el número de caracteres del texto, así que, tras cambiarlo, debes copiar de nuevo el código actualizado para que funcione con precisión.
- ¿Funciona el efecto con emojis o con alfabetos no latinos?
- Puedes escribirlos, pero el efecto se basa en una tipografía monoespaciada y en la unidad 'ch', de modo que con caracteres de ancho irregular la animación puede desajustarse visualmente.