Puede usar una animación de fondo CSS para ayudar a que su sitio se destaque entre la multitud, enfatizar su marca o simplemente verse increíble. Y debido a que CSS se ha vuelto tan poderoso, puede crear algunos atractivos Efectos de fondo CSS sin necesidad de una sola línea de JavaScript. ¡Ahora incluso puedes crear un fondo de video solo con CSS! ¿Quién nos lo hubiera dicho hace 15 años, eh?
Entonces, aquí están 20 fantásticos fondos animados puedes usar en tus proyectos o inspirarte! Ideal para sitios web de héroes deslizantes.
1) Colores de fondo animados en CSS
Empecemos con lo básico. Se desvanece un color simple: puede usar @keyframes para desvanecer el fondo entre tantos colores como necesite y usar los porcentajes para determinar cuánto tiempo permanecerá la animación en ese color antes de cambiar.
Simple, fácil de implementar y efectivo.
2) Gradiente de fondo animado CSS
Ahora vamos a subir de nivel: en lugar de que un solo color se desvanezca en otro, puede agregar un toque extra de clase con un degradado, deslizándose agradablemente hacia adelante y hacia atrás en la pantalla. Esta es una de las maneras más fáciles de hacer un fondo en movimiento en CSS.
3) Cuadrados flotantes
¡Es hora de agregar algunos objetos a la mezcla! Aquí hay un fondo en movimiento genial (solo CSS, lo creas o no) por TokioWeb. Estos cuadrados giratorios semitransparentes flotan en la pantalla.
Esto parece genial tal como está, pero lo bueno es que puedes jugar con el código para crear diferentes colores, formas, direcciones y velocidades. Ponte tu sombrero creativo y mira lo que se te ocurre.
4) Animación SVG (fondo animado HTML)
Si no está familiarizado con SVG, esta animación le parecerá mágica. No hay una sola línea de CSS o JS. Está hecho puramente usando HTML. Un puro Fondo animado HTML.
Esta es una de las mejores animaciones de fondo HTML que he visto. Me da las mismas vibraciones que algunos protectores de pantalla antiguos de Mac OS X con esos gradientes sofisticados que nunca pasan de moda y le dan un aspecto súper moderno.
5) Fondo animado de cuadrados en movimiento
Si está buscando una animación sutil pero moderna, este fondo animado hecho de cuadrados puede ser el candidato ideal para su página.
Esta animación está hecha puramente en CSS y el efecto se puede aplicar fácilmente a casi cualquier sitio web debido a que no distrae. Puede aplicar este fondo animado a todo su sitio web o a secciones específicas de su sitio.
6) Animación de fondo de paisaje básico
Este ejemplo muestra una de las animaciones de fondo más básicas al animar la posición de una imagen de izquierda a derecha.
Sin embargo, cuando se hace con la imagen correcta como en este ejemplo, muestra el potencial que puede tener para una página de destino.
7) Animación de fondo de cuadrícula
¡Esta animación no solo está hecha con CSS puro sino también con cero HTML!
Utiliza la función de fotogramas clave CSS para animar la posición de fondo de un fondo de cuadrícula. El efecto se ha aplicado al cuerpo de la página y también se puede aplicar a cualquier otro elemento.
8) Fondo animado de figuras
Esta animación le da a su sitio un ambiente moderno. Anima algunas figuras básicas hacia arriba y hacia abajo con algunos efectos de relajación que le dan a tu fondo un toque nuevo.
Las figuras están hechas de imágenes base64 y la animación de fondo se realiza mediante fotogramas clave CSS y transformaciones CSS. Todo muy básico.
9) Animación de fondo de texto
Aunque a primera vista parece que puede considerarse una animación de texto, esta animación es técnicamente una animación de fondo dentro de un elemento de texto.
Crea un efecto muy interesante y puede ser un efecto visual bastante agradable al elegir el fondo correcto y una fuente gruesa.
10) Animación de fondo de manchas
Sí, es posible tener una animación de blob sin usar JavaScript, y aquí hay un ejemplo para probarlo.
Usando la propiedad CSS border-radius podemos crear un elemento blob y luego podemos rotar como de costumbre usando la propiedad de transformación CSS. ¡Ahora puede agregar blobs animados a sus sitios web!
11) Fondos circulares
Otra animación sutil que puede agregar a su página para darle automáticamente un aspecto moderno sin mucho esfuerzo.
¡La animación es muy básica pero el efecto que crea se ve genial! El efecto se logra animando cada círculo individual con un efecto de pulso diferente utilizando la propiedad de fotograma clave CSS.
12) Animación de partículas
Aquí hay otro ejemplo que nos muestra cómo animar partículas brillantes usando elementos CSS y HTML.
Puede aplicar este efecto como fondo, aunque en realidad no es una animación de fondo per se.
Otro ejemplo de una animación súper básica es que, cuando se usa adecuadamente, puede darle a su sitio un aspecto totalmente nuevo.
Utiliza una animación vertical básica que imita el desplazamiento de un sitio web borroso en el fondo. Utiliza fotogramas clave CSS y transforma para realizar el movimiento de la imagen de fondo.
14) Animación de fondo de onda
Las animaciones de onda son en realidad una cosa. De hecho, las olas existían incluso antes de que se animaran en segundo plano.
Aquí está uno de los mejores animaciones CSS de onda puede utilizar para su fondo. Utiliza múltiples capas de ondas y agrega el efecto de paralaje y la opacidad para darle una sensación de profundidad.
15) Efectos de fondo CSS de fuegos artificiales – versión 1
Este efecto de fuegos artificiales animados CSS puro se vería muy bien por sí mismo (podría ser genial en una página de “Felicitaciones” o “Éxito” o algo así), pero podría verse aún mejor con una imagen en primer plano, tal vez un paisaje urbano.
16) Efectos de fondo CSS de fuegos artificiales – versión 2
Aquí hay otro enfoque que podría tomar para los fuegos artificiales: esta versión tiene una sensación diferente: las partículas tienen un movimiento más natural, casi como si tuvieran gravedad.
17) Sembrar efecto de fondo CSS
Este fondo en movimiento (usando solo CSS) se siente un poco como moverse a través de una piscina de bolas a la velocidad de la luz. Me gusta.
18) Líneas Borrosas
Si Robin Thicke hizo efectos de fondo CSS, este podría ser el tipo de cosa que se le ocurrió. Este es llamativo sin distraer. Tenga en cuenta que incluso con este tipo de letra bastante ligero, el texto sigue siendo fácil de leer.
19) Fondo CSS animado de cuadrícula retro
¿Eres fan del look retro de los 80? ¿Estás construyendo un sitio para un artista de synthwave? ¿O simplemente no puedes dejar ir el pasado? Si la respuesta a cualquiera de estas preguntas es “Sí”, ¡entonces te encantará esta excelente animación de cuadrícula retro estilo Tron!
Puede cambiar los colores con las variables $computationalFogBot configurando el fondo y $nodeStreak configurando el color de las barras.
Para ver otro ejemplo de este tema, echa un vistazo a este también:
20) Fondo animado con efecto de nevada (solo CSS)
No sé si es la temporada festiva en el momento en que estás leyendo esto. Para mí, no importa. Me pondré mi gorro de Papá Noel y veré Elf en cualquier época del año. Si sientes lo mismo, aquí tienes un bonito efecto de nevada para ti, ¡con copos de nieve reales!
21) Fondo de nevadas de paralaje
¿Qué es eso que dices, quieres aún más nieve? OK… ¿Qué tal este entonces? Esto tiene una nevada mucho más fuerte y un efecto de paralaje muy agradable para arrancar.
22) Triángulos infinitos
Éste juega trucos con tu cerebro. ¿Los triángulos se mueven hacia arriba o hacia abajo? ¿Expansión o contracción? Nadie lo sabe, eso es divertido.
23) Animación infinita del corazón flotante
Al igual que los triángulos anteriores, aquí hay otra animación de fondo CSS que entra directamente en la categoría “trippy”. Con este, no solo obtienes una animación de fondo genial, sino que también puedes abrir tus chakras al mismo tiempo. Prima.
24) Luciérnagas CSS
Estas pequeñas luciérnagas invocan una sensación de asombro e intriga. El efecto se ve genial con el fondo del bosque, pero también funciona bien con un color simple:
25) Hipnocuadrados
Estos cuadrados Hypno son lindos y bastante únicos. Sin embargo, no los mire demasiado, podrían estar transmitiendo mensajes subliminales a su mente subconsciente.
26) Animación de burbujas borrosas
Estas burbujas borrosas/ligeramente desenfocadas surgen aparentemente al azar, brindan placer y felicidad por un corto tiempo y luego, lenta pero inevitablemente, se desvanecen. Lo cual, dicho sea de paso, también es una descripción precisa de mi vida amorosa, pero esa es una historia para otro momento.
27) Lámpara de lava animada CSS
Bien, hasta ahora has visto algunos ejemplos geniales de animación de fondo CSS que puedes conectar y usar. Ahora exploremos lo que es posible cuando estás en la cima de tu juego, comenzando con esta lámpara de lava solo CSS de Janos Szudi!
28) Fondo animado con efecto de matriz (CSS)
Esto es bonito. Todo se hace simplemente a través de cambios de color en los pequeños elementos cuadrados, creando un efecto reconocible al instante.
29) Animación de fondo CSS del faro de noche
¿Qué tal este increíble trabajo de cameron fitzwilliam! Ahora, este usa JS… pero… el JS solo controla la forma en que la imagen reacciona al movimiento del mouse. Puede eliminar todos los JS y las animaciones en la ola y la luz del faro seguirá funcionando. Así que lo estoy permitiendo.
30) Búsqueda de libros CSS puro de una sola división
Esta es una animación CSS realmente agradable y linda por el increíble lynn pescador. Pero mira el cuadro HTML en el editor. No, no ajuste su monitor, lo está viendo bien – ella hizo esto usando un división única. ¡CSS puro no puede ser más puro que eso! O lo hace…
31) Animación de líneas diagonales
Esta animación no requerirá que escribas una sola línea de HTML, todo está hecho solo en CSS.
Las líneas en el fondo se crean utilizando la propiedad repeating-linear-gradient y luego se animan como de costumbre mediante el uso de animación de fotogramas clave.
32) Fondo De Nieve
Ideal para usar en la temporada navideña para darle un nuevo diseño a tu página.
Esta animación utiliza animación de paralaje para animar a diferentes velocidades las diferentes capas de bolas de nieve. De esta manera crea un efecto de perspectiva más realista cuando se combina con el efecto borroso de las bolas de nieve que están más lejos.
33) Animación CSS sin Div Car
Aquí abxlfazl khxrshidi ha ido un paso más allá, y ha creado este fondo animado CSS de un automóvil (¡uno que va a ser detenido muy pronto por lo que parece!), ¡sin div en absoluto!
Compruébelo usted mismo, el cuadro HTML está vacío, aparte de los comentarios. Cómo lo han hecho, es aplicar todo su CSS al elemento html.
¡Es bastante sorprendente lo que se te ocurre cuando dominas tu oficio! Pero una de las mejores cosas del desarrollo web front-end es que podemos usar fragmentos de código, bibliotecas y marcos CSS creados por personas mucho más capacitadas que nosotros. De esa manera, no tenemos que esperar hasta que alcancemos el dominio para comenzar a hacer cosas realmente geniales.
Una de esas bibliotecas que le recomiendo que consulte es fullPage.js.
Su navegador no soporta la etiqueta de vídeo.
fullPage lo ayuda a crear sitios de página completa, donde divide su página web en partes, cada una de las cuales ocupa el tamaño completo del navegador del usuario. Conoces el tipo: a medida que te desplazas, pasas a la página siguiente, en lugar de desplazarte un poco hacia abajo. ¿Aún no sabes de qué estoy hablando? Solo echa un vistazo a estos 20 ejemplos de sitios web de una página y tus dudas desaparecerán.
Con fullPage, podría integrar las diferentes animaciones de fondo CSS que acabamos de ver aquí, tal vez colocando una diferente en cada página. Si eso suena como algo que podría funcionar bien en uno de sus proyectos, consulte algunos ejemplos de lo que puede hacer aquí: ejemplos de fullPage.js.
Artículos Relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
