css背景图片每3秒自动切换

Answer 1

<div class="change">

</div>
<style>
.change {
animation: change 9s steps(1) infinite;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
width: 200px;
height: 100px;
}

@keyframes change {
0% {
background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
}

33% {
background-image: url(https://www.duhongwei.site/img/201809/s1.png);
}

66% {
background-image: url(https://p4.ssl.qhimg.com/t01fcaa9d8a4d24b5f1.png)
}
}
</style>
纯 css 每3秒播一张图片。9s是总共时间，如果是4张图片这里写 12s

Answer 2

可以使用css3或者js实现。
使用css3的动画，可以很方便设置更改css属性，并且可以循环播放动画。这种方法适合比较固定的背景图片。
使用js实现，可以考虑用jquery的动画函数或者原生的setInterval函数实现。