Cómo codificar efectos de texto inteligentes con CSS

Feb 3, 2026
Cómo
Image: Middle Child
[dieciséis] [Imagen: Niño Medio]

Los enlaces de reinversión son una excelente manera de llamar la atención de un usuario, especialmente si hacen algo inusual o original. El niño medio tiene un gran efecto, rara vez se ve en otros lugares, que captura cada letra y se separe con la animación, que se enciende cuando el visitante se cierne sobre la palabra. La animación ayuda a transmitir el carácter lúdico de la marca del sándwich.

En este artículo, le mostramos cómo recrear el efecto en su sitio. Para más inspiración, eche un vistazo a nuestra guía a la Los mejores ejemplos de animación de CSS (Con instrucciones sobre cómo codificarlos). Para algo un poco diferente, prueba una tapa. Creador de sitios web o nuestro elección de los mejores almacenamiento en la nube . Y si está haciendo su sitio más complejo, asegúrese de que su Alojamiento web está en punto

01. Efecto de texto de vuelco

Uno de los grandes efectos de texto en el sitio web de Middle Child es para los efectos de rollover en el menú, donde las letras se separan en el texto y giran ligeramente. Comience esto con algunas etiquetas HTML simples. 

 & lt; DIV Class = "Wrapper" & GT;
& lt; div class = "word" & gt; desayuno & lt; / div & gt;
& lt; / DIV & GT;

02. Crea CSS

Use un archivo CSS o etiquetas de estilo separadas para agregar las siguientes reglas CSS y hacer que la página Llene el tamaño completo del navegador asegurando el cuerpo y la envoltura tome la altura completa disponible. 

 Cuerpo {
Ancho: 100%;
Altura: 100%;
Margen: 0;
relleno: 0;
}
.wrapper {
Mostrar: Grid;
Altura: 100%;
}

03. Coloque la palabra

los palabra Clase se centra en la palabra en la cuadrícula. Cualquier texto que se le da el palabra La clase puede tener esto aplicado. los hasta La clase se va a aplicar a todas las demás letras y estos se moverán hacia arriba. 

. Palabra {
Tamaño de fuente: 3EM;
Margen: Auto Auto;
}

.word .up
{
Pantalla: bloque en línea;
Transform: traducir3d (0px, 0px, 0px)
Girar (0DEG);
Transición: Todos los 0.5s se alivian;
}

04. arriba y sobre

Ahora el abajo Clase comparte ajustes muy similares a la hasta Pero el flujo muestra el movimiento hacia arriba para el hasta dese la vuelta. Arriba también se gira ligeramente para mejorar el look. 

 .word .down
{
Pantalla: bloque en línea;
Transform: traducir3d (0px, 0px, 0px)
Girar (0DEG);
Transición: Todos los 0.5s se alivian;
}

.word: hover .up
{
Transform: traduce3d (0px, -8px, 0px)
Girar (12DEG);
Color: # 058B05
}

05. Flotando hacia abajo

Cuando el usuario se cierne sobre el texto, la clase baja mueve el texto hacia abajo. Más tarde, en JavaScript, el texto se dividirá en amplios períodos separados con las clases agregadas automáticamente a Spans alternativos. 

 .word: hover .down {
Transform: traducir3d (0px, 8px, 0px)
Girar (-12DEG);
Color: # 058B05;
}

06. Automático para la gente.

Es un poco de problemas para tener que poner cada letra en spans alternos con diferentes clases, por lo que automatizaremos el proceso al obtener JavaScript para consultar el selector y tomar cada letra. Aquí el str La variable agarra la letra actual a medida que se lanza a través del texto. 

 & lt; script & gt;
var elementos = document.queryselectorall
('.palabra');
para (var i = 0, l = elementos.length; yo
& lt; l; i ++) {
var str = elementos [I] .TextContent;
elementos [I] .innerhtml = '';

07. Añadir clases alternas.

Ahora, otro bucle coloca cada letra en su propio elemento de intervalo y agrega el hasta o abajo clase a los spans. Si observa esto en el navegador, verá el texto dividido por cada letra hacia arriba y hacia abajo, mientras gira ligeramente.

Puedes ver el efecto en la acción en el Sitio web de secundaria . 

 para (var j = 0, ll = str.length; j
& lt; ll; j ++) {
var spn = documento.createelement ('span');
Elementos [I] .appendchild (SPN);
spn.textcontent = str [j];
¿Dejar POS = (j% 2)? 'arriba abajo';
spn.classlist.add (POS);
}
 }
& lt; / script & gt;

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Comprar emito 286 o suscribir .

Leer más:

  • Añadir filtros SVG con CSS
  • Cómo diseñar con formas CSS: una introducción
  • 5 Generadores de rejilla CSS frescos

Cómo - Artículos más populares

Tipografía de marca: una guía completa

Cómo Feb 3, 2026

[dieciséis] Pentagram creó un tipografía a medida para el teatro público. (Crédito de la imagen: Pentagrama para el públic..

8 Características de la CSS de última generación (y cómo usarlas)

Cómo Feb 3, 2026

[dieciséis] (Crédito de la imagen: Getty Images) CSS está constantemente evolucionando y se ha agregado una gran cantidad d..

Diseñador de afinidad: Cómo usar la persona de exportación

Cómo Feb 3, 2026

[dieciséis] La afinidad del diseñador es una herramienta de edición de vectores popular. Además de las versiones de Mac y Windows, ..

Comienza con óxido

Cómo Feb 3, 2026

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

Diseña un avatar juguetable para un videojuego

Cómo Feb 3, 2026

[dieciséis] Para esto Tutorial de Photoshop , Estaré creando un humano jugable, mujer. Carácter de videojuegos ..

Cómo diseñar una cubierta de libro en InDesign

Cómo Feb 3, 2026

El dicho podría ser: 'No juzgues un libro por su portada', pero el diseño de una portada puede, de hecho, hacer o romper el éxito de un libro. Si eres como yo, el diseño de la portada es ..

Pinte una escena épica de Nueva York

Cómo Feb 3, 2026

Para este taller, estoy pintando una de mis asignaturas favoritas: un puente de la ciudad de Nueva York. He pintado el puente de Brooklyn muchas veces ahora en diferente luz, por lo que para ..

Crea un entorno de juego en un motor irreal 4

Cómo Feb 3, 2026

[dieciséis] Uso de My Unreal Engine 4 Proyecto La última parada como ejemplo, quiero mostrarle algunos pasos importantes a seguir al ..

Categorías