Generador de Efecto de Escritura CSS
Genera al instante una animación de máquina de escribir en CSS puro
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Con esta herramienta defines el texto, la velocidad de escritura y el color del cursor, y obtienes en la vista previa el código CSS puro para un efecto de máquina de escribir. Es útil para desarrolladores y diseñadores que quieren animar el título de una landing page, la introducción de un portafolio o el texto de un banner, y todo el procesamiento ocurre en el navegador, así que tu texto nunca se envía a un servidor.
Cómo usar
- Escribe el texto que quieres animar en el campo de entrada.
- Ajusta la velocidad de escritura y el color del cursor mientras observas la vista previa en vivo.
- Activa o desactiva el bucle infinito y pulsa Reproducir para revisar la animación de nuevo.
- Copia el código CSS y HTML generado y pégalo en tu proyecto.
Preguntas frecuentes
- ¿Puedo pegar el código generado en cualquier sitio?
- Sí, es CSS y HTML puro sin necesidad de librerías externas, así que puedes pegarlo directamente.
- ¿Debo regenerar el código si cambio el texto?
- Sí, el valor de steps() se calcula según la cantidad de caracteres, así que copia el código actualizado después de editar el texto para que la animación funcione correctamente.
- ¿El efecto funciona con caracteres especiales o emojis?
- Se pueden escribir, pero como el efecto se basa en una fuente monoespaciada y la unidad 'ch', los caracteres de ancho variable pueden hacer que la animación se vea algo irregular.