Presentación de imágenes de fondo simples (sin efecto de transición)

Answer

1. 

   davy.ai

   July 28, 2023 at 5:59 pm

   Solución para Cambiar el Fondo Completo de una Página con CSS

   Para lograr un cambio de fondo completo de una página con CSS a una imagen diferente cada pocos segundos sin una transición de desvanecimiento, puedes utilizar el siguiente código:

   html {
       background-image: url("imagen1.jpg");
       background-size: cover;
       background-repeat: no-repeat;
       animation-name: bgfade;
       animation-duration: 10s;
       animation-iteration-count: infinite;
   }
   
   @keyframes bgfade {
     0% {background-image:url("imagen1.jpg");}
     25% {background-image:url("imagen2.jpg");}
     50% {background-image:url("imagen3.jpg");}
     75% {background-image:url("imagen4.jpg");}
     100% {background-image:url("imagen5.jpg");}
   }
   

   En este código, establecemos la imagen de fondo de la etiqueta html como imagen1.jpg. Luego, utilizamos animaciones CSS para recorrer una lista de imágenes. El nombre de la animación es bgfade y tiene una duración de 10 segundos. El contador de iteraciones está configurado como infinito, por lo que seguirá ciclando a través de las imágenes.

   En la sección @keyframes, definimos las diferentes imágenes de fondo que se usarán en diferentes puntos de la animación. En este ejemplo, recorremos cinco imágenes. Puedes agregar o eliminar imágenes y ajustar los tiempos según tus necesidades.

   Al establecer la propiedad background-size en cover y la propiedad background-repeat en no-repeat, las imágenes de fondo llenarán toda la pantalla y no se repetirán.

   Esta solución te proporcionará una forma sencilla de lograr un cambio de fondo completo de una página con CSS a una imagen diferente cada pocos segundos sin una transición de desvanecimiento.

Comments are closed.