js+css实现昼夜切换按钮点击切换亮色与暗色效果代码-html代码-BFW代码库

js+css实现昼夜切换按钮点击切换亮色与暗色效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现昼夜切换按钮点击切换亮色与暗色效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        body,html {
        height:100%;
        display:grid;
        background:linear-gradient(to bottom,#edb74c 0,#d6733a 100%)
    }
    .night {
        background:linear-gradient(to bottom,#265078 0,#01071c 100%)
    }
    .wrappercont {
        margin:auto;
        position:relative
    }
    .toggle {
        cursor:pointer;
        width:170px;
        height:100px;
        background-color:#dbd9d9;
        box-shadow:-5px -5px 8px white inset,8px 8px 8px #9e9d9d inset;
        border-radius:50px;
        border:0;
        position:relative;
        margin-right:0
    }
    .toggle:focus {
        outline:0
    }
    .toggle-btn {
        width:70px;
        height:70px;
        background-color:#ededed;
        background:linear-gradient(to bottom,#edb74c 0,#d6733a 100%);
        box-shadow:-5px -3px 12px white,5px 5px 8px #9e9d9d;
        border-radius:50px;
        border:0;
        position:absolute;
        bottom:15px;
        left:10%;
        transition:all .5s ease-in
    }
    .toggle-btn.right {
        left:50%;
        box-shadow:-5px -3px 12px white,5px 5px 8px #6e6e6e;
        transition:all .5s ease-in;
        background:linear-gradient(to bottom,#265078 0,#01071c 100%)
    }
    .toggle.right {
        box-shadow:-5px -5px 8px white inset,8px 8px 8px #6e6e6e inset;
        background-color:#bab8b8
    }
    .sun .circle {
        width:50px;
        height:50px;
        position:absolute;
        top:-24px;
        right:10px;
        border-radius:60px;
        box-shadow:0 0 10px orange;
        background-color:#f2c968
    }
    .sun {
        positio.........完整代码请登录后点击上方下载按钮下载查看