简单的背景图片幻灯片（无过渡效果）答案

【问题标题】：Simple Background Image Slideshow (No Transition Effect)简单的背景图片幻灯片（无过渡效果）
【发布时间】：2022-01-25 07:59:22
【问题描述】：

我想每隔几秒将整页 CSS 背景更改为不同的图像。我尝试寻找一个简单的解决方案，但我找到的所有示例都有淡入/淡出过渡。

【问题讨论】：

你想要哪些过渡？
只希望它在图像之间切换而没有任何过渡效果。

标签： css image css-transitions background-image slideshow

【解决方案1】：

若要更改元素的背景图像而没有过渡效果，您可以使用 CSS @keyframes 动画，然后指定 steps() 作为缓动函数并传递相关参数。

body {
  animation: change-bg 10s steps(2, jump-none) forwards infinite;
}

@keyframes change-bg {
  0%, 100%  { background: url(https://dummyimage.com/500/00ff00/000); }
  20% { background: url(https://dummyimage.com/500/ff0000/000); }
  40% { background: url(https://dummyimage.com/500/0000ff/000); }
  60% { background: url(https://dummyimage.com/500/666666/000); }
  80% { background: url(https://dummyimage.com/500/ffee66/000); }
}

您也可以使用 JavaScript 实现类似的功能，使用 setInterval 函数，并以毫秒为单位传递延迟时间。

const slides = [
  "https://dummyimage.com/500/00ff00/000",
  "https://dummyimage.com/500/ff0000/000",
  "https://dummyimage.com/500/0000ff/000",
  "https://dummyimage.com/500/666666/000",
  "https://dummyimage.com/500/ffee66/000"
];

let index = 0;
  
setInterval(() => {
  document.body.style.backgroundImage = `url(${slides[index]})`;
  index = index < slides.length - 1 ? index + 1 : 0;
}, 2000); // every 2 seconds

我建议在开始动画之前预加载图像。

【讨论】：