CSS: менять фон каждые несколько секунд?

Question

Итак, я новичок в HTML и CSS и сейчас занимаюсь некоторыми исследованиями.

Я использую этот шаблон и пытаюсь менять фоновое изображение каждые 5 секунд.

Я уже выяснил, что фоновое изображение определено в CSS.

#bg:after {
        -moz-transform: scale(1.125);
        -webkit-transform: scale(1.125);
        -ms-transform: scale(1.125);
        transform: scale(1.125);
        -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
        -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
        -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
        transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
        background-image: url("../../images/bg1.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }

Мне бы хотелось иметь несколько фонов, которые меняются каждые несколько секунд.

Как это возможно?

Спасибо.

Answer 1

function run(interval, frames) {
    var int = 1;
    
    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }
    
    var swap = window.setInterval(func, interval);
}

run(1000, 10); //milliseconds, frames

#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

Answer 2

Используйте этот код для изменения цвета фона каждые 5 секунд.

body {
  -webkit-animation-name: bgcolor;
  -webkit-animation-duration: 5s;
  animation-name: bgcolor;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bgcolor {
  0% {
    background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
  }
  14.3% {
    background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
  }
  28.6% {
    background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
  }
  42.9% {
    background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
  }
  57% {
    background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
  }
  71% {
    background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
  }
  85.6% {
    background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
  }
  100% {
    background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
  }
}

@keyframes bgcolor {
  0% {
    background: radial-gradient(at 50% -20%, #16113B, #16113B) fixed;
  }
  14.3% {
    background: radial-gradient(at 50% -20%, #9b00a1, #16113B) fixed;
  }
  28.6% {
    background: radial-gradient(at 50% -20%, #0062a1, #16113B) fixed;
  }
  42.9% {
    background: radial-gradient(at 50% -20%, #00a18e, #16113B) fixed;
  }
  57% {
    background: radial-gradient(at 50% -20%, #00a144, #16113B) fixed;
  }
  71% {
    background: radial-gradient(at 50% -20%, #a18200, #16113B) fixed;
  }
  85.6% {
    background: radial-gradient(at 50% -20%, #a10000, #16113B) fixed;
  }
  100% {
    background: radial-gradient(at 50% -20%, #a10000bd, #16113B) fixed;
  }
}