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

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

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

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

第一种

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浏览器中出现了：

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

源码地址

打包好的地址：https://download.csdn.net/download/m0_46153949/13986277

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

文章目录

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

第一种

第二种

源码地址