开关电灯 

<!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'
    }
}
posted @ 2022-12-31 18:15  不尽人意的K  阅读(31)  评论(0)  编辑  收藏  举报