博客美化——页面白天黑夜切换

冷不防 2023-01-01 02:50 34阅读 0赞

### 文章目录 ###

*  博客美化——白天黑夜按钮实现
 *   *  第一种
     *  第二种
     *  源码地址

# 博客美化——白天黑夜按钮实现 #

> 到年底了，打算重新制作一下[个人博客园][Link 1]。美化过程中打算做一个类似于Github的白天黑夜的按钮。于是百度了一下，嗯……没有参考……

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5_size_16_color_FFFFFF_t_70]

> 没事我会F12，我可以用抄能力……  
> 最后历经千辛万苦，成品如下。共计两种自选参考。

![在这里插入图片描述][2020123018263790.gif_pic_center]

![在这里插入图片描述][20201230183334296.gif_pic_center]

--------------------

> 两种各有优缺点，自选参考。代码如下：

## 第一种 ##

*  html文件

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>暗色和亮色背景Toggle切换特效</title>
    
    		<link rel="stylesheet" href="css/datouwang.css">
    
    	</head>
    	<body>
    		<embed class="theme-light">
    			<div class="container">
    				<div class="toggler">
    					<label id="switch" class="switch">
    						<input type="checkbox" onchange="toggleTheme()" id="slider">
    						<span class="slider round"></span>
    					</label>
    				</div>
    				<div class="fl-path"></div>
    				<div class="fl-path-2"></div>
    				<div class="fl-path-1"></div>
    				<div class="fl-path-3"></div>
    				<div class="fl-path-4">
    					<span class="cr"></span>
    					<span class="eys"></span>
    				</div>
    				<div class="star">
    					<span class="s-star"></span>
    					<span class="s-star"></span>
    					<span class="s-star"></span>
    					<span class="s-star"></span>
    				</div>
    				<div class="cld">
    					<span class="cl"></span>
    					<span class="c2"></span>
    				</div>
    				<div class="gt-hb">
    					<span class="ey"></span>
    					<span class="mt"></span>
    					<span class="bd"></span>
    				</div>
    				<div class="hs">
    					<span class="rf"></span>
    				</div>
    				<div class="hs-1">
    					<span class="win"></span>
    				</div>
    			</div>
    		</embed>
    		<script src="js/datouwang.js"></script>
    	</body>
    </html>

*  JS文件

// function to set a given theme/color-scheme
    function setTheme(themeName) { 
    	localStorage.setItem('theme', themeName);
    	document.documentElement.className = themeName;
    }
    
    // function to toggle between light and dark theme
    function toggleTheme() { 
    	if (localStorage.getItem('theme') === 'theme-dark') { 
    		setTheme('theme-light');
    	} else { 
    		setTheme('theme-dark');
    	}
    }
    
    // Immediately invoked function to set the theme on initial load
    (function() { 
    	if (localStorage.getItem('theme') === 'theme-dark') { 
    		setTheme('theme-dark');
    		document.getElementById('slider').checked = false;
    	} else { 
    		setTheme('theme-light');
    		document.getElementById('slider').checked = true;
    	}
    })();

*  css文件

.theme-light { 
    	--fill: white;
    	--primary: black;
    	--red: #B0BEC5;
    	--redb: none;
    	--orange: #B0BEC5;
    	--orangeb: none;
    	--green: #B0BEC5;
    	--greenb: none --pink:#B0BEC5;
    	--pinkb: none;
    	--yellow: #B0BEC5;
    	--yellowb: none;
    	--violet: #B0BEC5;
    	--violetb: none;
    	--blue: #B0BEC5;
    	--blueb: none;
    }
    
    .theme-dark { 
    	--fill: #37474F;
    	--primary: black;
    	--red: red;
    	--redb: red;
    	--orange: orange;
    	--orangeb: orange;
    	--green: #00E676;
    	--greenb: #00E676;
    	--pink: orange;
    	--pinkb: orange;
    	--yellow: yellow;
    	--yellowb: yellow --violet:#D500F9;
    	--violetb: #D500F9;
    	--blue: #00B0FF;
    	--blueb: #00B0FF;
    }
    
    body { 
    	background-color: var(--fill);
    	transition: 0.4s all;
    }
    
    .container { 
    	width: 45vw;
    	overflow: hidden;
    	height: 30vw;
    	padding: 20px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	border-radius: 2px;
    	background-color: var(--fill);
    	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
    
    .fl-path { 
    	width: 40%;
    	height: 4px;
    	background-color: var(--red);
    	position: absolute;
    	bottom: 10px;
    	box-shadow: 0 0 10px var(--redb);
    }
    
    .fl-path:after { 
    	content: '';
    	width: 48%;
    	z-index: 3;
    	height: inherit;
    	position: absolute;
    	background-color: inherit;
    	right: -136%;
    }
    
    .fl-path-1 { 
    	width: 21%;
    	height: 20%;
    	background-color: var(--fill);
    	border-top-left-radius: 150px;
    	border-top-right-radius: 120px;
    	position: absolute;
    	bottom: 10px;
    	left: 40%;
    	border: 5px solid var(--red);
    	box-shadow: 0px -10px 20px var(--redb);
    	border-bottom: 0;
    }
    
    .fl-path-1:after { 
    	content: '';
    	width: 5%;
    	height: 20%;
    	position: absolute;
    	border-radius: 50%;
    	background-color: transparent;
    	border: 5px solid var(--red);
    	top: 15%;
    	box-shadow: 0 0 10px var(--redb);
    	transform: rotate(45deg);
    	left: 20%;
    }
    
    .fl-path-2 { 
    	width: 17%;
    	height: 15%;
    	background-color: var(--fill);
    	border-top-left-radius: 150px;
    	border-top-right-radius: 120px;
    	position: absolute;
    	bottom: 10px;
    	left: 60%;
    	border: 5px solid var(--red);
    	box-shadow: 0 0 0 4px var(--fill) 0 0 20px var(--redb);
    	border-bottom: 0;
    	z-index: 2;
    }
    
    .fl-path-4 { 
    	width: 15%;
    	height: 40%;
    	background-color: transparent;
    	position: absolute;
    	border-top-left-radius: 100px;
    	border-top-right-radius: 100px;
    	border-bottom-left-radius: 100px;
    	border-bottom-right-radius: 100px;
    	border: 5px solid var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	bottom: 12%;
    	left: 5%;
    	font-size: 1.3em;
    }
    
    .fl-path-4::before { 
    	content: '';
    	width: 5px;
    	height: 20%;
    	position: absolute;
    	background-color: var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	bottom: -21%;
    	left: 45%;
    }
    
    .fl-path-4 .cr { 
    	width: 8%;
    	height: 15%;
    	background-color: var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	position: absolute;
    	border-radius: 20px;
    	top: 40%;
    	left: 30%;
    	transform: rotate(50deg);
    }
    
    .fl-path-4 .cr::before { 
    	content: '';
    	width: 100%;
    	height: 100%;
    	background-color: var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	position: absolute;
    	border-radius: 20px;
    	left: 0%;
    	transform: rotate(-100deg);
    }
    
    .fl-path-4 .eys { 
    	width: 8%;
    	height: 6%;
    	background-color: var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	position: absolute;
    	border-radius: 20px;
    	top: 20%;
    	left: 40%;
    	box-shadow: 2vw 0px 0px 0px var(--greenb);
    }
    
    .fl-path-3 { 
    	width: 12%;
    	height: 30%;
    	background-color: var(--fill);
    	position: absolute;
    	border-top-left-radius: 100px;
    	border-top-right-radius: 100px;
    	border-bottom-left-radius: 100px;
    	border-bottom-right-radius: 100px;
    	border: 5px solid var(--green);
    	bottom: 10%;
    	z-index: 2;
    	left: 17%;
    	box-shadow: 0 0 10px var(--greenb);
    }
    
    .fl-path-3::before { 
    	content: '';
    	width: 5px;
    	height: 20%;
    	position: absolute;
    	background-color: var(--green);
    	box-shadow: 0 0 10px var(--greenb);
    	bottom: -21%;
    	left: 45%;
    }
    
    .s-star { 
    	width: 1.5%;
    	height: 5%;
    	border-radius: 40%;
    	background-color: var(--yellow);
    	box-shadow: 0 0 10px var(--yellowb);
    	position: absolute;
    }
    
    .s-star:after { 
    	content: '';
    	width: 100%;
    	height: 100%;
    	border-radius: 40%;
    	box-shadow: 0 0 10px var(--yellowb);
    	background-color: var(--yellow);
    	position: absolute;
    	transform: rotate(90deg);
    }
    
    .star span:nth-child(1) { 
    	top: 30%;
    }
    
    .star span:nth-child(2) { 
    	left: 50%;
    	top: 20%;
    }
    
    .star span:nth-child(3) { 
    	top: 70%;
    	left: 40%;
    }
    
    .star span:nth-child(4) { 
    	top: 20%;
    	right: 10%;
    }
    
    .cl { 
    	width: 25%;
    	height: 8%;
    	background-color: var(--fill);
    	border: 5px solid var(--blue);
    	box-shadow: 0 0 10px var(--blueb);
    	position: absolute;
    	border-top-left-radius: 100px;
    	border-top-right-radius: 100px;
    	border-bottom-left-radius: 100px;
    	border-bottom-right-radius: 100px;
    }
    
    .cl:before { 
    	content: '';
    	width: 20%;
    	height: 100%;
    	position: absolute;
    	border-radius: 50%;
    	top: -15%;
    	left: 110%;
    	border: 5px solid var(--blue);
    	box-shadow: 0 0 10px var(--blueb);
    }
    
    .c2 { 
    	width: 20%;
    	height: 8%;
    	top: 20%;
    	left: 15%;
    	background-color: var(--fill);
    	border: 5px solid var(--blue);
    	box-shadow: 0 0 10px var(--blueb);
    	position: absolute;
    	border-top-left-radius: 100px;
    	border-top-right-radius: 100px;
    	border-bottom-left-radius: 100px;
    	border-bottom-right-radius: 100px;
    }
    
    .gt-hb { 
    	width: 20%;
    	height: 24%;
    	right: 20%;
    	position: absolute;
    	border-radius: 50%;
    	border: 5px solid var(--violet);
    	box-shadow: 0 0 10px var(--violetb);
    }
    
    .gt-hb:before { 
    	content: '';
    	width: 25%;
    	height: 30%;
    	position: absolute;
    	border-radius: 50%;
    	top: 200%;
    	left: 30%;
    	border: 5px solid var(--violet);
    	box-shadow: 0 0 10px var(--violetb);
    }
    
    .gt-hb .bd { 
    	width: 5px;
    	height: 100%;
    	left: 45%;
    	top: 100%;
    	background-color: var(--violet);
    	box-shadow: 0 0 10px var(--violetb);
    	position: absolute;
    }
    
    .gt-hb .mt { 
    	width: 90%;
    	height: 5px;
    	top: 50%;
    	left: -6%;
    	background-color: var(--violet);
    	box-shadow: 0 0 10px var(--violetb);
    	position: absolute;
    	border-left: 1vw solid var(--fill);
    	border-right: 1vw solid var(--fill);
    }
    
    .gt-hb .ey { 
    	width: 12%;
    	height: 12%;
    	background-color: var(--orange);
    	box-shadow: 0 0 10px var(--orangeb);
    	position: absolute;
    	border-radius: 50%;
    	top: 20%;
    	left: 25%;
    }
    
    .hs { 
    	width: 4px;
    	height: 40%;
    	background-color: var(--orange);
    	box-shadow: 0 0 10px var(--orangeb);
    	position: absolute;
    	right: 17%;
    	bottom: 4%;
    }
    
    .hs span { 
    	width: 11.49vw;
    	height: 5px;
    	background-color: var(--orange);
    	box-shadow: 0 0 10px var(--orangeb);
    	position: absolute;
    	transform-origin: top left;
    	transform: rotate(-60deg);
    }
    
    .hs-1 { 
    	width: 4px;
    	height: 70%;
    	background-color: var(--orange);
    	box-shadow: 0 0 10px var(--orangeb);
    	position: absolute;
    	right: 5%;
    	bottom: 4%;
    }
    
    .win { 
    	width: 1000%;
    	height: 13%;
    	background-color: var(--fill);
    	position: absolute;
    	top: 60%;
    	left: -900%;
    	border-top: 5px solid var(--orange);
    	/* box-shadow:0 0 10px var(--pink); */
    	border-bottom: 5px solid var(--orange);
    }
    
    .win:before { 
    	content: '';
    	width: 80%;
    	height: 5px;
    	background-color: var(--orange);
    	/* box-shadow:0 0 10px var(--pink); */
    	position: absolute;
    	top: 45%;
    	right: 0;
    }
    
    /* toggle css */
    
    .switch { 
    	position: absolute;
    	display: inline-block;
    	width: 20%;
    	height: 15%;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }
    
    /* Hide default HTML checkbox */
    .switch input { 
    	opacity: 0;
    	width: 0;
    	height: 0;
    }
    
    /* The slider */
    .slider { 
    	position: absolute;
    	cursor: pointer;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	background-color: #ccc;
    	-webkit-transition: 0.4s;
    	transition: 0.4s;
    }
    
    .slider:before { 
    	position: absolute;
    	content: "";
    	height: 110%;
    	width: 60%;
    	left: 0px;
    	bottom: 4px;
    	top: 0;
    	bottom: 0;
    	margin: auto 0;
    	-webkit-transition: 0.4s;
    	transition: 0.4s;
    	box-shadow: 0 0px 15px #2020203d;
    	background: white url('https://i.ibb.co/FxzBYR9/night.png');
    	background-repeat: no-repeat;
    	background-position: center;
    }
    
    input:checked+.slider { 
    	background-color: #2196f3;
    }
    
    input:focus+.slider { 
    	box-shadow: 0 0 1px #2196f3;
    }
    
    input:checked+.slider:before { 
    	-webkit-transform: translateX(70%);
    	-ms-transform: translateX(70%);
    	transform: translateX(70%);
    	background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
    	background-repeat: no-repeat;
    	background-position: center;
    }
    
    .slider.round { 
    	border-radius: 50px;
    }
    
    .slider.round:before { 
    	border-radius: 50%;
    }

--------------------

## 第二种 ##

*  html文件

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>白天黑夜切换</title>
    
    		<link rel="stylesheet" href="css/datouwang.css">
    
    	</head>
    
    	<body>
    
    		<div class="container" data-state="day">
    			<div class="toggle--wrapper">
    				<div class="toggle--knob"></div>
    			</div>
    		</div>
    
    		<script src="js/datouwang.js"></script>
    
    	</body>
    </html>

*  CSS文件

*, *::after, *::before { 
    	box-sizing: border-box;
    	padding: 0;
    	margin: 0;
    }
    
    body { 
    	background: #5796b6;
    	width: 900px;
    	height: 100vh;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    
    .container { 
    	background-color: #fff;
    	max-height: 700px;
    	min-width: 350px;
    	max-width: 600px;
    	width: 70vw;
    	height: 80vh;
    	border-radius: 8vw;
    	box-shadow: 3px 3px 20px -6px rgba(0, 0, 0, 0.5);
    	transition: background-color 700ms cubic-bezier(0.5, 0, 0.5, 1);
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	padding: 2vmax;
    }
    
    .toggle--wrapper { 
    	background-color: #E6A555;
    	width: 20em;
    	height: 10em;
    	border-radius: 20em;
    	padding: 1em;
    	display: flex;
    	align-items: center;
    	overflow: hidden;
    	position: relative;
    	transition: background-color 300ms ease-in;
    	box-shadow: 3px 3px 20px -6px rgba(0, 0, 0, 0.5);
    	z-index: 1;
    }
    
    .toggle--knob { 
    	width: 50%;
    	height: 0;
    	padding-bottom: 50%;
    	background: white;
    	border-radius: 50%;
    	transform: translateX(0);
    	transition: transform 700ms cubic-bezier(0.5, 0, 0.5, 1);
    	position: relative;
    	border: none;
    }
    
    .toggle--knob::before { 
    	content: '';
    	display: block;
    	background-color: #E6A555;
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	left: -100%;
    	transform-origin: center top;
    	transform: translateX(0);
    	transition: transform 700ms cubic-bezier(0.5, 0, 0.5, 1), background-color 300ms ease-in;
    }
    
    [data-state="day"] { 
    	background-color: #fff;
    }
    
    [data-state="day"] .toggle--wrapper { 
    	background-color: #E6A555;
    }
    
    [data-state="night"] { 
    	background-color: #000;
    }
    
    [data-state="night"] .toggle--wrapper { 
    	background-color: #2c4b98;
    }
    
    [data-state="night"] .toggle--knob { 
    	transform: translateX(100%) rotate(25deg);
    }
    
    [data-state="night"] .toggle--knob::before { 
    	transform: translateX(100%) rotate(45deg);
    	background-color: #2c4b98;
    }

*  JS文件

console.clear();
    const elToggle = document.querySelector('.toggle--wrapper');
    const elApp = document.querySelector('.container');
    
    
    const machine = { 
    	initial: elApp.dataset.state, //'day',
    	states: { 
    		day: { 
    			on: { 
    				TOGGLE: 'night'
    			}
    		},
    		night: { 
    			on: { 
    				TOGGLE: 'day'
    			}
    		},
    	}
    };
    
    
    elToggle.addEventListener('click', (e) => { 
    	const currentState = elApp.dataset.state;
    	const nextState = machine.states[currentState].on.TOGGLE;
    	toggleState(nextState);
    })
    
    const toggleState = (state) => { 
    	elApp.dataset.state = state;
    }

> 但是，放进去后还是不行……因为毕竟不是专业前端开发，图片长宽写死的。最后，在Chrom浏览器中出现了：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5_size_16_color_FFFFFF_t_70_pic_center]

*  思路：图片长宽改为动态变化或许可以……
 *  但目前没兴趣解决，有时间再说吧。如果有大佬可以修改，欢迎评论交流。我一下午就干了这个……

## 源码地址 ##

> 打包好的地址：[https://download.csdn.net/download/m0\_46153949/13986277][https_download.csdn.net_download_m0_46153949_13986277]

[Link 1]: https://www.cnblogs.com/gh110/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5_size_16_color_FFFFFF_t_70]: /images/20221120/7a6d8298dc85464994e60e5910122316.png
[2020123018263790.gif_pic_center]: /images/20221120/bf7039c14e69457b930c1f693a961dec.png
[20201230183334296.gif_pic_center]: /images/20221120/84e0189a6dd645df9f151bd630cb88e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201230184101614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center
[https_download.csdn.net_download_m0_46153949_13986277]: https://download.csdn.net/download/m0_46153949/13986277