样式部分:
<link id="css" rel="stylesheet" type="text/css" href="style.css"/>
js部分
function redCSS(){
document.getElementById("css").href="red.css"
}
html部分
<span onclick="redCSS">切换红色风格</span>
如果需要下次打开页面抱持这个风格,那么需要用到cookie
<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