css实现定时切换背景颜色或者图片

在当前设置背景图片或颜色的div中设置animation: changeBg 10s infinite;

   /// 背景图片区域
    .background-img {
        width: 100%;
        height: 260px;
        animation: changeBg 10s infinite;
        background-color: red;  // 背景颜色  和图片设置一个就行
        // background-image: url('图片地址');
        background-size: 100% 100%;
}

@keyframes changeBg{
    0%{
        // background-image: url('图片地址');
        background-color: red;
    }
    50%{
        // background-image: url('图片地址');
        background-color: aqua;
    }
    100%{
        // background-image: url('图片地址');
        background-color: blueviolet;
    }
}

解释一下上面代码中的内容：class为background-img的图片元素，初始显示的是图片地址1。animation属性设定了图片在5秒内循环播放，infinite意味着无限循环。这个动画名字为changeBg。@keyframes是指定动画的关键帧，表示动画从0%开始时，显示的是图片地址1，中间50%时，显示的是图片地址2，最后100%时，显示的是图片地址3。

这样，我们就实现了使用CSS实现图片轮播的功能。如果要增加图片，可以按照上面的格式在@keyframes中添加更多关键帧，增加图片元素即可