javascript - CSS:每隔几秒更改一次背景？

Question

所以我是 HTML 和 CSS 的新手，目前正在做一些研究。

我正在使用 this模板，我试图每 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

使用此代码每 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;
  }
}