Crea un efecto de texto de vapor animado

Feb 10, 2026

Cómo

[dieciséis]

Agregar efectos al texto puede agregar un nuevo nivel de compromiso e interés. Efectos tales como tipografía kinética Agarrará la atención de un espectador, a la ayuda. experiencia de usuario Y ayuda a contar la historia que se le dice. El efecto de texto en el Hace maravillas sitio trae el fuente web en línea de enfoque por línea. Siga leyendo para averiguar cómo recrear algo similar.

Consigue el Archivos de proyecto Para ayudar a seguir este tutorial.

01. Iniciar documento HTML

El primer paso es definir la estructura de documentos que almacenará el contenido HTML. Esto consiste en el contenedor de documentos, que almacena las secciones de la cabeza y el cuerpo. Mientras que la sección de la cabeza almacena tintas a los recursos externos de CSS y JavaScript, el cuerpo almacena el contenido visible creado en el Paso 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; borroso texto & lt; / title & gt;
& lt; link rel = "stylesheet" tipo = "texto / css" href = "styles.csss" / & gt;
& lt; script src = "code.js" & gt; / lt; / script & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
  *** Paso 2 aquí
& lt; / body & gt;
& lt; / html & gt;

02. Contenido HTML

Este paso define el contenido HTML visible. Tome nota de cómo los textos designados para tener el efecto de desenfoque están contenidos en un contenedor que tiene la clase 'Blur'. Esta clase es utilizada por JavaScript para hacer referencia a los elementos de texto en el paso 03, y por CSS en pasos posteriores.

 & lt; H2 & GT;
  La disciplina viene de
  & lt; ul class = "blur" & gt;
  & lt; li & gt; compromiso & lt; / li & gt;
  & lt; li & gt; perseverance & lt; / li & gt;
  & lt; li & gt; dedication & lt; / li & gt;
  & lt; li & gt; entrenamiento & lt; / li & gt;
  & lt; li & gt; aspiración & lt; / li & gt;
  & lt; li & gt; educación & lt; / li & gt;
  & lt; / ul & gt;
& lt; / h2 & gt;

03. Retardo automático de la animación.

Cree un nuevo archivo llamado 'Code.js'. Cada elemento dentro del contenedor de desenfoque se presentará tres segundos después del elemento anterior. JavaScript se utiliza para automatizar la aplicación de atributos CSS únicos. El primer paso de esto es seleccionar todos los elementos de primer nivel dentro del contenedor de desenfoque, después de que la página se haya cargado.

 ventana.addeventlistener ("carga", función () {
  var nodos = document.queryselectorall (". Blur & GT; *");
  *** Paso 4 AQUÍ
});

04. Número de segundos

Un bucle 'para' se usa para hacer referencia a cada elemento devuelto a la variable 'nodos' en el paso anterior. El contador de índice del bucle 'para' se usa para calcular el número de segundos para asignar al atributo de retardo de animación. Como resultado, cada artículo tiene un retraso que tiene tres segundos más que el elemento anterior.

 para (var i = 0; i & lt; nodes.length; i ++) {
  nodos [I] .style.animationdelay = (I * 3) + "S";
}

05. CSS borroso

Cree un nuevo archivo llamado 'Styles.css'. El primer paso para definir las reglas de presentación de CSS inicia cada uno de los artículos de texto como invisibles. También se aplica una animación llamada 'AnimationBlur' que animará el artículo en vista durante una duración de cinco segundos. El modo de animación debe establecerse en 'Delantero' para que se detenga en su último cuadro.

 .blur & gt; * {
  Opacidad: 0;
  Animación: AnimateBlur 5s hacia adelante;
}

06. Iniciar animación.

La animación aplicada a los elementos 'Blur' en el paso 5 se definen en este paso. La referencia a 'AnimationBlur' se hace como una animación de fotogramas clave. El primer cuadro 'de' establece los elementos tan visibles con una sombra de texto, pero con un color de texto transparente. Esto es lo que produce el efecto de texto borroso.

 @keyframes animateblur {
  desde {
  Opacidad: 1;
  Shadow Shadow: 0 0 1-RGBA (0,0,0, .5);
  Color: RGBA (0,0,0,0);
  }
    *** Paso 7 aquí
}

07. Marco de animación final

El marco 'a' dentro de la animación define el marco final en el que se animará el texto. Este marco establece la sombra de texto para desaparecer, junto con un color de texto que es completamente visible. Combinado con el paso 06, los marcos de animación entre 'desde' y 'a' serán calculados automáticamente por el navegador.

 a {
  Opacidad: 1;
  Shadow Shadow: 0 0 0px RGBA (0,0,0,0);
  Color: # 000;
}

Este artículo apareció originalmente en la revista Web Designer. Suscríbete aquí .

Recuerda, siempre piensa en el usuario.

Generate - the conference for web designers

Al introducir efectos de lujo en una página, debe tener un propósito, debe pensar en la experiencia del usuario.Y esto es lo que el desarrollador de la UI de Frelance Front-End Sara Soueidan revelará en su "Uso de CSS (y SVG) por el bien de la charla de UX" en Generar Londres 2018 .

En su charla, ella va a mostrar una amplia gama de posibilidades que ofrece CSS para mejorar la experiencia general del usuario de su UI, utilizando CSS (con aspersiones de SVG y JS aquí y allá).

Asegúrate de no perderte. Obtenga su boleto ahora.

Artículos relacionados:

Crear un efecto de texto tambaleante con JavaScript
Crea un efecto de texto de neón brillante.
Cómo hacer que el texto sea perfectamente

Crea un efecto de texto de vapor animado

01. Iniciar documento HTML

02. Contenido HTML

03. Retardo automático de la animación.

04. Número de segundos

05. CSS borroso

06. Iniciar animación.

07. Marco de animación final

Recuerda, siempre piensa en el usuario.

Cómo - Artículos más populares

Cómo hacer un logotipo en Photoshop

Comience con activos en el diseñador de afinidad

Crea un paisaje 3D en 6 pasos simples

Cómo crear una pintura al óleo digital usando Artrage

Construye tu propio juego de física webgl

Cómo pintar miniaturas deliciosas

Cómo hacer deliciosas texturas con lápices

Cómo dibujar un paisaje con pastels

Categorías