网页风格化 用CSS实现皮肤适时切换

html-css015

网页风格化 用CSS实现皮肤适时切换,第1张

首先准备好几种风格的css文件:

样式部分:

<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