</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
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：body{background: url(image.jpg) no-repeatbackground-size: 200px 200px}。
3、浏览器运行index.html页面，此时背景图片成功被设定为200*200。
