0

Quiero realizar un cambio de color a todo el body de un html, teniendo como principales colores el amarillo,anaranjado y negro simulando un amanecer,atardecer y anochecer,claramente estos colores tienen que tener su tiempo cada uno para simular la transición,pero no logro pasar del primer color (amarillo) hacia el siguiente (anaranjado) y este hacia el negro (simulando el anochecer)

1
  • 2
    Ya has recibido una respuesta pero para próximas preguntas te sugiero que pongas el código de lo que has intentado para que se vea que has tratado de resolver el problema por ti mismo antes de preguntar aquí
    – user7176
    el 2 may. 2018 a las 9:57

1 respuesta 1

5

Eso se puede hacer con iteraciones de CSS. Al body le agrego una animación, que en mi caso le puse el nombre anim, que tiene duración de 5 segundos, y se repite indefinidamente.

La animación se ejecuta inmediatamente después de que carga la página web. Con @keyframes determino los intervalos de tiempo, en porcentaje del progreso.

En mi ejemplo, mi plan fue cambiar de amarillo, naranja, negro, y luego volver a cambiar los colores, pero de manera inversa, naranja, y otra vez amarillo, de modo que cuando vuelve a amarillo, empieza la animación otra vez.

Los porcentajes los calculé de manera manual, la animación tiene 5 partes, entonces hago 100/(partes-1), y da que cada un %25 tiene que cambiar de color.

@keyframes anim{
    0% {background-color: #ff0;} /*Amarillo*/
   25% {background-color: #f80;} /*Naranja*/
   50% {background-color: #000;} /*Negro*/
   75% {background-color: #f80;} /*Otra vez naranja*/
  100% {background-color: #ff0;} /*Otra vez amarillo*/
}
body {
  animation-name: anim;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.