PublicidadCrear un efecto de máquina de escribir con CSS puede agregar un toque nostálgico y atractivo a los elementos de texto de su sitio web. Este efecto imita la apariencia del texto escrito como si fuera una máquina de escribir antigua, carácter por carácter. Veamos cómo puedes lograr este efecto usando animaciones CSS. Guía paso a paso: creación de un efecto de máquina de escribir con CSS Comience con una estructura HTML básica para el texto de su máquina de escribir:

A continuación, cree un archivo CSS (styles.css) para definir los estilos y animaciones: /* estilos.css */ .typewriter h1 { overflow: oculto; /* Garantiza que el texto no sea visible fuera de su contenedor */ border-right: .15em solid orange; /* Efecto de parpadeo del cursor */ white-space: nowrap; /* Mantiene el texto en una línea */ margin: 0 auto; /* Centra el contenedor de texto */ letter-spacing: .15em; /* Ajusta el espacio entre caracteres */ animación: escribiendo pasos de 3,5 s (40, fin), parpadeo-caret .75 s paso-fin infinito; } /* Animación de escritura */@fotogramas clave escribiendo { from { width: 0; } a { ancho: 100%; } } /* Animación del cursor parpadeante */@keyframes flash-caret { desde, hasta { color-borde: transparente; } 50% { color del borde: naranja; } }123456789101112131415161718192021222324252627282930/* estilos.css */ .typewriter h1 { desbordamiento: oculto; /* Garantiza que el texto no sea visible fuera de su contenedor */ border-right: .15em solid orange; /* Efecto de parpadeo del cursor */ white-space: nowrap; /* Mantiene el texto en una línea */ margin: 0 auto; /* Centra el contenedor de texto */ letter-spacing: .15em; /* Ajusta el espacio entre caracteres */ animación: escribiendo pasos de 3,5 s (40, fin), flash-caret .75 s paso-fin infinito;} /* Animación de escritura */@keyframes escribiendo { from { width: 0; } a { ancho: 100%; }} /* Animación del cursor parpadeante */@keyframes flash-caret { desde, hasta { color-borde: transparente; } 50% { color del borde: naranja; }}Aquí hay una demostración en vivo: vea el CSS del efecto Pen Typewritter de Abhishek Ghosh (@abhishekghosh-the-encoder) en CodePen. El selector h1 de la máquina de escribir apunta al elemento h1 dentro del div de clase .typewriter. Prepara el elemento para el efecto de máquina de escribir ocultando el desbordamiento, creando un borde que simula un cursor y configurando animaciones.animación:escribiendo pasos de 3,5 segundos (40, fin), parpadeo-carácter fin de paso de 0,75 segundos infinito;: Esta línea aplica dos animaciones al elemento h1.typing: revela gradualmente el texto aumentando el ancho de 0 a 100% durante 3,5 segundos.blink-caret: crea un efecto de cursor parpadeante usando CSS border-color.@keyframes escribiendo: define la animación de escritura , que anima el ancho del contenedor de texto de 0 a 100%.@keyframes flash-caret: define la animación de parpadeo-caret, que alterna el color del borde para simular un cursor parpadeante.Ajustar el tiempo y los estilosPuedes ajustar los valores de duración de la animación (3,5 segundos para escribir animación y 0,75 segundos para parpadear el cursor) en el CSS para acelerar o ralentizar el efecto. Modifique el espaciado entre letras, el tamaño de fuente y otros estilos para adaptarlos a sus preferencias de diseño. Pruebas y ajustes Pruebe la máquina de escribir efecto en diferentes navegadores y dispositivos para garantizar que funcione como se espera. Ajuste las animaciones y estilos según los comentarios y el impacto visual deseado. Mejoras y variaciones Efecto de retardo: agregue un retraso antes de que comience la animación de escritura usando el retardo de animación. Líneas múltiples: extienda el efecto a varias líneas aplicándolo a u otros elementos a nivel de bloque. Consideraciones de accesibilidad Asegúrese de que el efecto de máquina de escribir sea accesible probándolo con lectores de pantalla y asegurándose de que el texto siga siendo legible y comprensible. Efecto de máquina de escribir con jQuery Para crear un efecto de máquina de escribir usando animaciones CSS @keyframes con la función show() en jQuery, puedes lograr un efecto similar al de las animaciones CSS puras. Así es como puedes combinar la función show() de jQuery con animaciones CSS para crear el efecto de máquina de escribir: Primero, configura tu estructura HTML. Aquí hay un ejemplo básico:

A continuación, defina sus estilos CSS en estilos.css para crear el efecto de máquina de escribir: /* estilos.css */ .typewriter h1 { overflow: oculto; borde derecho: 0,15 em naranja sólido; /* Efecto de parpadeo del cursor */ white-space: nowrap; margen: 0 automático; espacio entre letras: 0,15 em; } .typewriter h1.show { animación: escribir pasos de 3,5 s (40, fin), parpadeo-caret .75 s paso-fin infinito; } /* Animación de escritura */@fotogramas clave escribiendo { from { width: 0; } a { ancho: 100%; } } /* Animación del cursor parpadeante */@keyframes flash-caret { desde, hasta { color-borde: transparente; } 50% { color del borde: naranja; } }123456789101112131415161718192021222324252627282930313233/* estilos.css */ .typewriter h1 { desbordamiento: oculto; borde derecho: 0,15 em naranja sólido; /* Efecto de parpadeo del cursor */ white-space: nowrap; margen: 0 automático; espacio entre letras: .15em;} .typewriter h1.show { animación: escribir pasos de 3,5 s (40, fin), parpadeo-caret .75 s paso-fin infinito;} /* Animación de escritura */@fotogramas clave escribiendo { desde { ancho : 0; } a { ancho: 100%; }} /* Animación del cursor parpadeante */@keyframes flash-caret { desde, hasta { color-borde: transparente; } 50% { color del borde: naranja; }}Ahora, cree un archivo JavaScript script.js para agregar la función show() y alternar la clase .show para activar el efecto de máquina de escribir: // script.js $(document).ready(function() { // Ocultar el texto inicialmente $(‘#typewriter-text’).hide() // Muestra el texto con efecto de máquina de escribir $(‘#typewriter-text’).show(function() { $(this).addClass(‘show’ ); }); });// script.js $(document).ready(function() { // Ocultar el texto inicialmente $(‘#typewriter-text’).hide(); // Mostrar el texto con efecto de máquina de escribir $(‘#typewriter-text’).show(function() { $(this).addClass(‘show’); });});Aquí está el resultado: Vea el efecto de máquina de escribir con pluma CSS y Js de Abhishek Ghosh (@abhishekghosh-the-encoder) en CodePen. Conclusión La implementación de un efecto de máquina de escribir con CSS agrega un elemento dinámico y atractivo al contenido de texto de su sitio web. Al utilizar animaciones CSS de forma eficaz, puede crear un efecto que recuerda a las antiguas máquinas de escribir, mejorando la experiencia del usuario y añadiendo interés visual a sus páginas web. Experimente con diferentes estilos y tiempos para lograr el efecto deseado que se alinee con el diseño y el tema de su sitio web. Lea también: Cómo agregar una insignia verificada al perfil de autor de WordPress usando CSS Hipervínculo de efecto de marcador resaltador de WordPress con CSS