<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="new_file.css">
</head>
<body class="off">
<input type="checkbox" id="abc">
<label for="abc"></label>
<img src="dengpao.png" >
<script src="new_file.js"></script>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
img{
display: block;
}
input{
visibility: hidden; /* 保留位置隐藏按钮 */
}
body{
height: 100vh; /* vh是当前窗口的百分比 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body.off{
background-color: #333;
}
body.on{
background: radial-gradient(circle, white 15%,#333 50%);
}
label{
display: block;
width: 100px;
height: 50px;
background-color: lightgray;
border: 5px solid lightgray;
border-radius: 30px;
transition: all 0.5s ease;
}
/* 给label标签添加一个行内元素:不能设置宽高 */
label::after{
content: "";
width: 50px;
height: 50px;
background-color: white;
border-radius: 25px;
position: absolute; /* 绝对定位会在定位的同时转换为块级元素 */
transition: all 0.5s ease;
}
/* 当多选按钮被选中时,这个标签就会有一个checked状态 */
input:checked+label{
background-color: #00BFFF;
border: 5px solid #00BFFF;
}
input:checked+label::after{
transform: translateX(50px);
}
let kaiguan = document.querySelector('input')
let body2 = document.querySelector('body')
kaiguan.onclick = function(){
if(kaiguan.checked){
body2.className = 'on'
}else{
body2.className = 'off'
}
}