Cómo crear un efecto de escritura animado

Jan 29, 2026

Cómo

Cuando se usa bien, Animación CSS Puede agregar interés y personalidad a su sitio. En este artículo, caminaremos por cómo crear un efecto animado que hará que su tipografía aparezca gradualmente, como si estuviera escribiendo en una máquina de escribir. Puede ver un ejemplo de la animación en acción en el sitio para Cripton , un bot de comercio de criptompurrency. El efecto es impresionante y también es fácil implementar.

Para otras formas fáciles de crear un diseño web decente, intente un excelente Creador de sitios web herramienta, o una parte superior Alojamiento web Servicio. O, siga leyendo para averiguar cómo lograr esta animación en su propio sitio.

Explora la nueva frontera de la animación CSS.

01. Iniciación de documentos

El primer paso es iniciar la estructura de la página web. Esto consiste en el contenedor HTML responsable de almacenar las secciones de la cabeza y el cuerpo. Si bien la principal responsabilidad de la sección de la cabeza es cargar el CSS externo, la sección del cuerpo almacenará el contenido HTML creado en el Paso 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; Typing Effect & Lt; / Title & GT;
& lt; link rel = "stylesheet" tipo = "texto / css" href = "styles.csss" / & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
*** Paso 2 aquí
& lt; / body & gt;
& lt; / html & gt;

02. Contenido HTML

El contenido HTML consiste en un contenedor que utiliza la clase 'escribiendo'. Esto será utilizado por el CSS para aplicar el efecto de escritura a cualquier elemento secundario. El elemento de contenido infantil está hecho de una etiqueta H1, pero podría usar otro elemento, como 'P' para crear el elemento como párrafo.

 & lt; div clase = "mecanografía" & gt;
  & lt; h1 & gt; pon tu título aquí ... & lt; / h1 & gt;
& lt; / DIV & GT;

03. Iniciación CSS

Crear un archivo llamado 'Styles.CSS'. El primer paso de la CSS define el documento y los contenedores del cuerpo para cubrir la ventana del navegador completo sin ningún espaciado de fronteras visible. Los colores predeterminados para el fondo de la página Negro y los colores de texto blanco también se establecen en este paso. Los elementos de contenido dentro de la página heredarán el color establecido en este paso como su color predeterminado.

 Cuerpo, HTML {
  bloqueo de pantalla;
  Ancho: 100%;
  Altura: 100%;
  Fondo: # 000;
  Color: #fff;
  relleno: 0;
  Margen: 0;
}

04. Escribiendo niños

Todos los niños dentro del contenedor de escritura están configurados para mostrar en una línea sin el uso de envoltura de texto. Lo más importante es que estos elementos infantiles tienen la animación de "mecanografía" que se les aplica. Esta animación está configurada para reproducir durante cinco segundos con instantáneas de 50 fotogramas, lo que permite el efecto de escritura escalonada.

 .typing & gt; * {
  Desbordamiento: oculto;
  Espacio blanco: Nowrap;
  Animación: typinganim 5s pasos (50);
}

05. Ojos de cara

El efecto también está acompañado por una cara animada que parece narrarse el texto escrito. Este paso crea los ojos de esta cara como un elemento "virtual" de CSS usando el después selector. Los ojos se colocan en relación con el texto principal, con su conjunto de contenido como dos caracteres de texto DOT.

 .typing & gt; *::después{
  contenido: ". .";
  bloqueo de pantalla;
  Posición: Absoluto;
  TOP: 1EM;
  Izquierda: .35EM;
}

06. Cara boca

Como con los ojos, la boca de la cara está hecha de un elemento virtual CSS, esta vez usando el antes de selector. La boca se coloca en relación con el elemento de texto principal, además de tener un radio de borde para que aparezca con una forma redondeada.

los typingspeak Se aplica animación; Durará 0.5 segundos utilizando dos marcos de animación. Con la animación se repite cinco veces, el tiempo total de animación será de 2.5 segundos.

 .typing & gt; *::antes de{
  contenido: "";
  Posición: Absoluto;
  bloqueo de pantalla;
  TOP: 2.1EM;
  Izquierda: .25EM;
  Ancho: 1EM;
  Altura: .1EM;
  Radio fronterizo: 100%;
  Fondo: #fff;
  Animación: typingspeak .5s pasos (2);
  animación-iteración-cuenta: 5;
}

07. Definiciones de animación

Este paso define las animaciones a las que se hace referencia por elementos creados en pasos anteriores. los typinganim La animación que se ha utilizado para el efecto de escritura cambia su elemento de no ancho a ancho completo. los typingspeak La animación utilizada para la boca de la cara cambia su elemento de aparecer plano a más abierto.

 @keyframes typinganim {
  de {ancho: 0}
  a {ancho: 100%}
}
@keyframes typingspeak {
  0% {ancho: 1em; Altura: .1EM}
  100% {ANCHO: 1EM; Altura: .5EM; }
}
***

¿Tienes archivos de diseño para ahorrar?Actualiza tu almacenamiento en la nube Así que depende del trabajo.

Este artículo se publicó originalmente en el número 275 de Creative Web Design Magazine Web Designer. Comprar emisión 275 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

Crea animaciones de UI Slick
Entendiendo la propiedad de visualización de CSS
Crea un efecto de texto de vapor animado.

Cómo crear un efecto de escritura animado

01. Iniciación de documentos

02. Contenido HTML

03. Iniciación CSS

04. Escribiendo niños

05. Ojos de cara

06. Cara boca

07. Definiciones de animación

Cómo - Artículos más populares

Cómo hacer un meme en Photoshop

Una guía para las herramientas web de Google

Crea un diseño sensible con la cuadrícula CSS

Tres pasos para un cielo nocturno brillante en acuarela

Cómo crear colores brillantes con pinturas al óleo

Caracteres de juego de niveles con ensamblaje creativo

Construye una UI basada en la tarjeta con la Fundación

Explora código creativo con p5.js

Categorías