Web前端开发 HTML CSS 实战_白天黑夜开关

web前端开发 html css 实战|前端开发者

checkbox进行切换
html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>无标题文档</title>
</head>
<style>
    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    * {
        transition: all 1s ease
    }
    input[type=checkbox] {
        display: none
    }
    input[type=checkbox]+label {
        background-color: #040d1c;
        width: 200px;
        height: 80px;
        border-radius: 50px;
        display: block;
        padding: 10px;
        box-shadow: inset 5px 5px 20px rgba(0, 0, 0, 0.5);
        z-index: 5;
        position: absolute;
        top: calc(50% – 50px);
        left: calc(50% – 80px);
        cursor: pointer;
        )
    }
    input[ type=checkbox]+label+section {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #0f1f3a;
        z-index: -1
    }
    </p><p>#a {
        width: 80px;
        height: 80px;
        border-radius: 100px;
        background-color: #f0f0f0;
        box-shadow: 0 0 100px rgba(255, 255, 255, 1)
    }
    input[ type=checkbox]:checked+label+section {
        background-color: #568eef;
    }
    input[ type=checkbox]:checked+label {
        background-color: #2a5fba;
    }
    input[ type=checkbox]:checked+label #a {
        margin-left: calc(100% – 80px);
        background: #f4e94e;
        box-shadow: 0 0 100px rgba(249, 240, 104, 1)
    }
</style>
<body>
    <input type=”checkbox” id=”c” />
    <label for=”c”>
        <div id=”a”>
        </div>
    </label>
    <section>
    </section>
</body>
</html>

web前端开发 html css 实战|前端开发者

https://www.rokub.com

» 本文来自:前端开发者 » 《Web前端开发 HTML CSS 实战_白天黑夜开关》
» 本文链接地址:https://www.rokub.com/2768.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!