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

代码语言:html

所属分类:其他

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0