css3昼夜背景切换开关特效,8种选项开关的切换特效
时间: 2023-07-28 20:10:45 浏览: 48
好的,以下是一个简单的CSS3昼夜背景切换开关特效,包括8种选项开关的切换特效:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS3昼夜背景切换开关特效</title>
<style type="text/css">
body {
background-color: #f6f6f6;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: #fff;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
background-color: #fff;
content: url(sun.png);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
input:checked + .slider:before {
transform: translateX(26px);
content: url(moon.png);
}
</style>
</head>
<body>
<h1>CSS3昼夜背景切换开关特效</h1>
<p>点击下面的开关按钮切换背景颜色:</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<script type="text/javascript">
var slider = document.getElementsByClassName("slider");
var body = document.getElementsByTagName("body")[0];
for(var i=0; i<slider.length; i++) {
slider[i].addEventListener("click", function() {
if(body.style.backgroundColor == "#f6f6f6") {
body.style.backgroundColor = "#333";
body.style.color = "#fff";
} else {
body.style.backgroundColor = "#f6f6f6";
body.style.color = "#333";
}
});
}
</script>
</body>
</html>
```
在上面的代码中,使用了一个`<label>`元素和一个`<input>`元素来创建一个可点击的开关按钮,然后使用CSS3的`::before`伪元素来创建开关按钮的滑块。当点击开关按钮时,使用JavaScript来切换页面的背景颜色和文本颜色。同时,使用CSS3的过渡效果来实现开关按钮的动画效果。