Question

所以我是HTML＆amp; 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秒更改一次背景颜色。

＆＃13;

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;
  }
}

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

#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%); }

＆＃13;

CSS：每隔几秒换一次背景？

2 个答案: