82 efectos de texto CSS animados creativos
Excelentes ejemplos de estilos de texto CSS
Efectos de texto creativos y la libertad de HTML y CSS ejemplos de código que puedes usar para lo que tu quieras si de web hablamos. Actualización de la colección de junio de 2023.
¿Cómo animar un texto en CSS?
Para animar un texto en CSS, puedes seguir los siguientes pasos:
- Agregar la propiedad
animational selector del elemento de texto que deseas animar. - Especificar el nombre de la animación que crearás usando la propiedad
animation-name. - Establecer la duración de la animación con la propiedad
animation-duration. - Elegir la dirección en la que quieres que se ejecute la animación con la propiedad
animation-direction. - Establecer el número de veces que deseas que se repita la animación con la propiedad
animation-iteration-count.
A continuación, te proporciono un ejemplo básico de animación de texto en CSS:
phpCopy code<style>
h1 {
animation-name: miAnimacion;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes miAnimacion {
from {color: red;}
to {color: blue;}
}
</style>
<h1>¡Hola mundo!</h1>
En este ejemplo, la animación se aplica al elemento h1 y se llama miAnimacion. La animación cambia gradualmente el color del texto de rojo a azul y viceversa en un bucle infinito.
Observa estos efectos sencillos css
DIVIDIR TEXTO CON RUTA DE CLIP
Autor
- Håvard Brynjulfsen
- 11 de mayo de 2020
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
CARTAS 3D AZÚCAR DULCE
Autor
- Håvard Brynjulfsen
- 16 de abril de 2020
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
CSS EN CSS CON MUCHOS C Y S
Autor
- Giulia Cardieri
- 8 de abril de 2020
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
MODO DE ESCRITURA
Autor
- CSS GRID
- 1 de abril de 2020
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
SUBRAYAR ANIMACIÓN DE DESPLAZAMIENTO DEL CLIP
Autor
- Marwan Zibaoui
- 15 de febrero de 2020
Enlaces
Hecho con
- HTML / CSS
Un elegante subrayado animado con recorte de texto. El texto utiliza background-clip: texty un linear-gradientfondo para ser bicolor. Nos movemos animando el gradiente animando el background-positionlugar. ¡Tenemos que usar un elemento envoltorio para tener el subrayado resaltado debajo del texto ya que el color del texto ya es el fondo!
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
TIPOGRAFÍA CSS ARCADE: SNOW BROS. (1990)
Autor
- Lynn Fisher
- 6 de febrero de 2020
Enlaces
Hecho con
- HTML (Pug) / CSS (Stylus)
Tipografía pixelada del juego arcade Snow Bros. Dibujado en CSS.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
VEINTE VEINTE Y GRADIENTES MULTICOLORES
Autor
- Leena Lavanya
- 2 de enero de 2020
Enlaces
Hecho con
- HTML / CSS
Gradientes multicolores recortados con CSS, mezclados con SVG feGaussianBlur.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
EFECTO DE SOMBRA DE TEXTO EN CAPAS CSS
Autor
- Shireen Taj
- 13 de diciembre de 2019
Enlaces
Hecho con
- HTML / CSS
text-shadow es un pequeño y divertido estilo CSS que puede convertir cualquier texto simple en una hermosa obra de arte.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
TYPO TRIPLE
Autor
- creatz
- 22 de noviembre de 2019
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
DESPLAZAMIENTO DEL SUBRAYADO GRUESO DE TEXTO DE VARIAS LÍNEAS
Autor
- marca
- 11 de septiembre de 2019
Enlaces
Hecho con
- HTML (Haml) / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
SALVAR
Autor
- Sebastian Opperman
- 29 de julio de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Banner CSS peculiar usando box-shadows.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
TRUNCAMIENTO MULTILÍNEA EN CSS PURO
Autor
- Benjamin Solum
- 18 de julio de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
PERSPECTIVA DESLIZANTE
Autor
- Adam Dipinto
- 18 de julio de 2019
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
FUENTES DE LOS 80 TEXTO EFECTO 4: TEXTO DEL CIBERESPACIO
Autor
- Ion Emil Negoita
- 5 de julio de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
SUBRAYADO DE TEXTO MULTILÍNEA PERSONALIZADO CON MAYÚSCULAS REDONDEADAS
Autor
- ceniza
- 23 de mayo de 2019
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
TELÉFONO WESTERN ELECTRIC BIG BUTTON
Autor
- Alex
- 15 de mayo de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Una recreación del teléfono Western Electric Big Button producido en la década de 1970. Recreada usando flexbox, cuadrícula, sombras de texto y trazos de texto. Este bolígrafo encontró varias peculiaridades de CSS. Primero, se establece una
border-radiusy se
overflow: hiddenrompe el suavizado en el
border-radius, dejando una apariencia irregular. Esto se solucionó un poco al agregar una luz muy suave
box-shadowen el lado que tiene el
border-radius. Esto alivia un poco el problema. En segundo lugar,
text-stroketodavía se implementa de manera cruda en los navegadores. Todos los trazos de texto se dibujan en el exterior del glifo, lo que cambia la forma del glifo. Además, las sombras de texto se dimensionan utilizando el interior del glifo y terminan más pequeñas. Para evitar esto, sobredimensioné el
text-strokey luego trató de colocar cada glifo de modo que el trazo desbordara ligeramente el contenedor y se cortara. Esto le da una apariencia más suave, pero es impreciso y corta algunos de los caracteres.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
TACHADO DE TEXTO MULTILÍNEA
Autor
- Mandy Michael
- 8 de mayo de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
ESQUEMA DE EFECTO DE TEXTO
Autor
- Jamie Hammond
- 29 de abril de 2019
Enlaces
Hecho con
- HTML / CSS
Efecto de esquema de texto simple usando CSS básico.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
DE NUEVO EN LA OSCURIDAD
Autor
- David Lillo
- 25 de abril de 2019
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
TEXTO DE LUZ DE NEÓN
Autor
- Sarah Fossheim
- 2 de marzo de 2020
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
TEXTO EN UN CÍRCULO
Autor
- Michelle Barker
- 4 de abril de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Texto en un círculo con variables CSS
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
SUBRAYADO DE TEXTO SVG
Autor
- Andrew Spencer
- 4 de marzo de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Use un SVG para resaltar una sola palabra dentro de un bloque de texto. El tamaño del SVG se flexionará para adaptarse a la palabra y se usará una etiqueta para manejar la semántica.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
TEXTO ANIMADO DE BLOBS
Autor
- Amli
- 25 de febrero de 2019
Enlaces
Hecho con
- HTML / CSS
Texto de blobs animados usando solo CSS.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
MANTENTE POSITIVO: EFECTO DE TEXTO
Autor
- Adam Kuhn
- 31 de enero de 2019
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
GRADIENTE DE FONDO MULTILÍNEA
Autor
- Matthias Ott
- 3 de diciembre de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Gradiente de fondo multilínea con mix-blend-mode.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
CSS DE CLIP DE FONDO
Autor
- Amir
- 30 de noviembre de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
DESCONSTRUCTADO
Autor
- Ben Szabo
- 19 de noviembre de 2018
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
TEXTO EMERGENTE CON SOMBRA DE IMAGEN DE FONDO
Autor
- MARCA
- 25 de octubre de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Recortando texto de un fondo y luego haciendo que aparezca «popout» similar a cómo se puede usar la sombra de texto. De hecho, ¡esto hace uso de la sombra de texto!
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
CSS TEXT REVEAL
Autor
- Andrés Sánchez
- 25 de octubre de 2018
Enlaces
Hecho con
- HTML / CSS
Texto simple revelar con CSS utilizando pseudo elementos.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
SOLO CSS: GRADIENTE DE SEGMENTACIÓN DE TEXTO
Autor
- Yusuke Nakaya
- 24 de octubre de 2017
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
¡Escriba su palabra favorita y cambie su tamaño de fuente favorito!
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
COOL 3D TEXT
Autor
- Ashish Anand
- 30 de septiembre de 2018
Enlaces
Hecho con
- HTML / CSS
Texto 3D genial con estado de desplazamiento en solo CSS.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
EFECTO DE TEXTO FLOTANTE REFRACTADO
Autor
- George W. Park
- 18 de septiembre de 2018
Enlaces
Hecho con
- HTML / CSS
Este ejemplo muestra cómo se puede usar CSS puro para crear un efecto de texto flotante refractado animado.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
SOMBRA DE TEXTO ANIMADA
Autor
- Erin E. Sullivan
- 10 de septiembre de 2018
Enlaces
Hecho con
- HTML / CSS
Una divertida animación CSS que crea un rebote mientras imita una separación RGB durante el proceso.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
SVG / ANIMACIÓN DE TRAZO
Autor
- Mansoour
- 31 agosto 2018
Enlaces
Hecho con
- HTML / CSS
Cita animada del día 🙂 «haz algo creativo todos los días» con animaciones de trazo.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
EFECTO SUBRAYADO
Autor
- cecile
- 23 agosto 2017
Enlaces
Hecho con
- HTML / CSS (SCSS)
Efecto de subrayado animado puro CSS en varias líneas.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
TRANSICIÓN DE TEXTO DE CSS GOOEY
Autor
- Mike Golus
- 14 agosto 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (Sass)
Un efecto de transformación de texto muy simple y versátil con un par de parámetros editables.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
TEXTO DE NEÓN BRILLANTE
Autor
- Comehope
- 8 agosto 2018
Enlaces
Hecho con
- HTML / CSS
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
TRAZO DE TEXTO + SOMBRA DE DESPLAZAMIENTO
Autor
- MARCA
- 24 de julio de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
INCLINAR TEXTO AL PASAR EL MOUSE
Autor
- delpher
- 17 de julio de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Incline el texto al pasar el mouse en HTML y CSS.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
MEGAMAN LISTO!
Autor
- Christopher Wallis
- 7 de julio de 2018
Enlaces
Hecho con
- HTML (Pug) / CSS (SCSS)
Reproduciendo el famoso «READY» de los juegos de Megaman sin usar JavaScript. Esto utiliza CSS Grid ampliamente y variables CSS para el tiempo.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:No
ANIMANDO TEXTO RAYADO
Autor
- Mandy Michael
- 25 de junio de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
Animación de texto rayado con clip de fondo y degradados.
Navegadores compatibles:Chrome, Firefox, Opera, Safari
Sensible:si
EFECTO DE LETRAS
Autor
- Stefano Perelli
- 11 de febrero de 2018
Enlaces
Hecho con
- HTML
- CSS
- JavaScript (jquery.js)
Efecto de letras sobre desplazamiento.
TEXTO DIVERTIDO
Autor
- Sebastian DeRossi
- 7 de enero de 2018
Enlaces
Hecho con
- HTML
- CSS
- JavaScript (createjs.js)
Haga clic para volver a dibujar! Asignar sprites a texto siempre es divertido.
ANIMACIÓN DE LÍNEA DE TEXTO
Autor
- John Healey
- 25 de septiembre de 2017
Enlaces
Hecho con
- HTML
- CSS / MENOS
- JavaScript (tweenmax.js)
TEXTO EMERGENTE
Buena animación de línea de texto con TweenMax.js.
Autor
- Nathan Taylor
- 14 de septiembre de 2017
Enlaces
Hecho con
- HTML / CSS (SCSS)
Texto emergente de CSS puro.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:si
EFECTO DE TEXTO DE PELÍCULA MUDA
Autor
- Dimitra Vasilopoulou
- 27 de julio de 2017
Enlaces
Hecho con
- HTML
- CSS
- JavaScript
Efecto de texto de película con canvas.
ANIMACIÓN DE TEXTO SVG
Autor
- Cassie Evans
- 17 de julio de 2017
Enlaces
Hecho con
- HTML
- CSS
- JavaScript (anime.js)
Buena animación de texto SVG.
ANIMACIÓN DE REVELACIÓN DE TEXTO
Autor
- Artur Sedlukha
- 15 de julio de 2017
Enlaces
Hecho con
- HTML / Pug
- CSS / SCSS
- JavaScript (tweenmax.js)
El texto del GSAP revela la animación.
Morphing de texto de desollado de cebolla
Morphing de texto de skinning de cebolla en HTML / CSS / JS.
Hecho por John Healey
el 14 de junio de 2017
descargar demo y código
Texto sombreado
Texto sombreado, un experimento SVG + CSS3 sobre sombras animadas. No está optimizado para dispositivos móviles … todavía.
Realizado por Rafael González
el 16 de septiembre de 2016
descargar demo y código
Segunda sombra
Texto de estilo con SVG.
Hecho por Code School
21 de abril de 2016
descargar demo y código
Texto Squiggly
Experimento de texto ondulado con filtros SVG.
Hecho por Lucas Bebber
22 de octubre de 2015
descargar demo y código
FUEGO ARDIENTE
Autor
- Makan
- 24 de febrero de 2015
Enlaces
Hecho con
- HTML / CSS
Efectos de texto animados usando CSS3 text-shadowpara dar a los encabezados de texto una llama ardiente.
Navegadores compatibles:Chrome, Edge, Firefox, Opera, Safari
Sensible:No
EFECTO DE DESPLAZAMIENTO DEL TEXTO DE PRIMAVERA
Autor
- Nathan Taylo
- 15 de septiembre de 2017
Enlaces
Hecho con
- HTML
- CSS / SCSS
Solo jugaba con los efectos de los botones y pensé que esto era genial.
EFECTO SIMPLE DE DESPLAZAMIENTO DE CSS CON BUCLES SASS
Autor
- Charlie Marcotte
- 16 agosto 2017
Enlaces
Hecho con
- HTML / Pug
- CSS / Sass
Animación simple y pequeña. Los bucles Sass hacen que los asombrosos retrasos en la animación sean realmente fáciles de hacer … puede obtener mucho kilometraje de ellos.
SUBRAYADOS ANIMADOS
Autor
- Ragnar Þór Valgeirsson
- 12 de julio de 2017
Enlaces
Hecho con
- HTML
- CSS / SCSS
Demostración de un efecto subrayado animado. Animación CSS pura.
Desplazamiento de texto de perspectiva CSS
Un experimento usando webfonts en combinación con herramientas de transformación CSS 3D.
Hecho por James Bosworth
22 de agosto de 2016
descargar demo y código
Texto resaltado animado
La idea es simple, se utiliza el gradiente lineal y la transición.
Hecho por Rian Ariona
19 de febrero de 2015
descargar demo y código
Texto feliz
Efecto de texto feliz HTML y CSS.
Hecho por Bennett Feely 6 de diciembre de 2014
descargar demo y código
Transformaciones de texto pelado
Este bolígrafo muestra texto que parece despegado de la página. Tiene una animación suave cuando está suspendido.
Hecho por Michiel Bijl
25 de noviembre de 2014
descargar demo y código
Tipografía Texto Neón
Diseño de texto (tipografía) con efecto neón.
Hecho por Prima Utama Apriansyah
6 de marzo de 2014descargar demo y código
Texto giratorio verticalmente
Rotación vertical de texto con HTML y CSS.
Hecho por Jacob
el 23 de julio de 2014
descargar demo y código
INTENTOS DE CSS EN TEXTO CON FONDO SESGADO EN LÍNEA
Autor
- Mark Stickling
- 22 de junio de 2018
Enlaces
Hecho con
- HTML / CSS (SCSS)
El uso de sesgo solo se representa si el elemento es display: blocko inline-block. Algunos de estos tienen el mismo aspecto en una vista amplia pero fallan de manera diferente a medida que disminuye el ancho de la vista.
MOVER TEXTO EN LA NUBE
Autor
- Cameron Fitzwilliam
- 4 de marzo de 2018
Enlaces
Hecho con
- HTML / CSS
Mover texto en la nube con HTML y CSS.
FONDO DE TEXTO PEGAJOSO CON FILTROS SVG
Autor
- Ines Montani
- 25 de diciembre de 2017
Enlaces
Hecho con
- HTML
- CSS
Ejemplo de uso de un filtro SVG pegajoso para crear bordes suaves alrededor del texto en línea con un fondo.
TEXTO CON FONDO DE VIDEO
Autor
- Daniel Yuschick
- 18 agosto 2017
Enlaces
Hecho con
- HTML
- CSS / SCSS
Esta demostración explora la creación de texto / rutas eliminados en SVG y la reproducción de un video de YouTube como relleno.
FONDO DEL TEXTO
Autor
- Stephanie
- 31 de mayo de 2017
Enlaces
Hecho con
- HTML
- CSS / SCSS
Recorte de fondo de texto.
Texto SVG: Mecanografía animada
Escritura animada HTML, CSS y SVG.
Hecho por Tiffany Rayside
12 de febrero de 2015
descargar demo y código
¿Cómo hacer animaciones de texto en HTML?
Para hacer animaciones de texto en HTML, puedes utilizar CSS3. Aquí hay un ejemplo básico de cómo animar un texto usando CSS3:
phpCopy code<!DOCTYPE html>
<html>
<head>
<title>Animación de texto en HTML</title>
<style>
@keyframes animacionTexto {
0% {
color: red;
transform: rotateY(0deg);
}
50% {
color: blue;
transform: rotateY(180deg);
}
100% {
color: red;
transform: rotateY(360deg);
}
}
.animated-text {
animation-name: animacionTexto;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<h1 class="animated-text">¡Hola, mundo!</h1>
</body>
</html>
En este ejemplo, se utiliza la regla @keyframes para definir la animación. Luego se aplica la animación al texto utilizando la clase .animated-text. La propiedad animation-duration establece la duración de la animación en 3 segundos y animation-iteration-count establece que la animación se repita infinitamente. La función ease-in-out controla cómo se acelera y desacelera la animación. Puedes cambiar los valores en la animación de @keyframes para crear diferentes efectos de animación.
