Html
    Css
    Js

    
                        
 body {
	margin:0;
	/*外边距*/
                            padding:0;
	/*内边距*/
                            font-family:sans-serif;
	/*字体样式*/
                            transition:1s;
	/*过渡时间*/
}
body.night {
	background:#00151f;
	/*背景颜色*/
}
.toggle {
	position:absolute;
	/*绝对定位*/
                            top:40px;
	/*距上*/
                            right:50px;
	/*距左*/
                            background:#fff;
	/*背景*/
                            border:2px solid #00151f;
	/*边框*/
                            width:45px;
	/*宽*/
                            height:20px;
	/*高*/
                            cursor:pointer;
	/*当光标处在位置时的样式,此处为链接样式*/
                            border-radius:20px;
	/*圆角*/
                            transition:0.5s;
	/*过渡时间*/
}
.toggle.active {
	/*当点击到夜间按钮时*/
                            background:#00151f;
	border:2px solid #fff;
}
.toggle:before {
	/*之后显示*/
                            content:"";
	/*文本*/
                            position:absolute;
	/*绝对定位*/
                            top:2.3px;
	left:2px;
	width:16px;
	height:16px;
	background:#00151f;
	border-radius:50%;
	transition:0.5s;
}
.toggle.active::before {
	/*切换到夜间时的样式*/
                            left:25px;
	background:#fff;
}
.main {
	/*主体内容*/
                            margin:10% auto;
	width:90%;
}
.main h1 {
	margin:0 0 20px;
	padding:0;
	color:#000;
	transition:0.5s;
}
.main p {
	margin:0;
	padding:0;
	transition:1.5s;
	color:#000;
	font-size:18px;
	text-indent:2em;
}
body.night .main h1,body.night .main p {
	/*夜间模式的切换*/
                            color:#fff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

darkmode夜间模式

更新时间:2022-11-29 00:29:07

0