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 {
    	position:relative;
    	top:0;
    	right:0;
    	transition:all .5s ease-in
    }
    .sun .triangle {
    	width:0;
    	position:absolute;
    	height:0;
    	top:-7px;
    	right:-14px;
    	border-left:15px solid transparent;
    	border-right:15px solid transparent;
    	transform:rotate(94deg);
    	border-bottom:25px solid #d6733a
    }
    .sun .triangle.two {
    	transform:rotate(43deg);
    	top:-36px;
    	right:-4px
    }
    .sun .triangle.three {
    	transform:rotate(0deg);
    	top:-45px;
    	right:20px
    }
    .sun .triangle.four {
    	transform:rotate(-44deg);
    	top:-35px;
    	right:44px
    }
    .sun .triangle.five {
    	transform:rotate(-76deg);
    	top:-13px;
    	right:54px
    }
    .sun.gone {
    	top:50px;
    	right:12px;
    	transition:all .5s ease-in
    }
    .moon {
    	position:relative;
    	top:50px;
    	left:0;
    .........完整代码请登录后点击上方下载按钮下载查看