如何实现每5秒自动更换CSS中#bg:after的背景图片？

嘿，刚入门HTML/CSS就折腾动态背景效果，这想法超赞！不过要注意哦，纯CSS没法实现定时切换的逻辑，得搭配JavaScript来搞定。正好你的背景是用#bg:after伪元素定义的，咱们可以用**CSS变量（自定义属性）**来配合JS实现平滑切换，还能保留你原来的过渡动画，具体步骤如下：

第一步：修改CSS，用CSS变量替代固定背景图 #

把你原来#bg:after里的background-image换成CSS变量，这样JS就能间接修改伪元素的背景啦：

#bg:after {
  /* 用CSS变量作为背景图的占位，默认值可以设你原来的图片 */
  background-image: var(--bg-image, url('你的默认背景图路径'));
  
  /* 保留你原来的所有transform、transition样式 */
  -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, background-image 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, background-image 0.5s ease-in-out;
  -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, background-image 0.5s ease-in-out;
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, background-image 0.5s ease-in-out;
}

我给transition加了background-image的过渡，这样切换图片时会有平滑渐变效果，要是不需要可以去掉这部分~

第二步：写JavaScript逻辑实现定时切换 #

在你的HTML文件末尾（比如</body>标签之前）加一段JS代码，用来定时更新CSS变量的值：

// 先把要切换的所有背景图片路径存到数组里，记得替换成你自己的图片路径哦
const backgroundImages = [
  '图片1的路径.jpg',
  '图片2的路径.jpg',
  '图片3的路径.jpg'
];

let currentImageIndex = 0;
// 获取页面上的#bg元素
const bgContainer = document.getElementById('bg');

// 定义切换背景的函数
function switchBackground() {
  // 更新CSS变量的值，改变伪元素的背景图
  bgContainer.style.setProperty('--bg-image', `url('${backgroundImages[currentImageIndex]}')`);
  // 切换到下一张图片，到最后一张时循环回第一张
  currentImageIndex = (currentImageIndex + 1) % backgroundImages.length;
}

// 页面加载完成后先显示第一张图，然后每5秒（5000毫秒）切换一次
switchBackground();
setInterval(switchBackground, 5000);

小提示 #

• 图片路径要确保正确：如果是相对路径，要和你的HTML文件所在位置对应，比如图片放在images文件夹里，路径就是'images/图片1.jpg'
• 要是想调整切换速度，把setInterval里的5000改成你想要的毫秒数就行，比如3秒就是3000

内容的提问来源于stack exchange，提问作者iOS Koray