<span>博客美化——页面白天黑夜切换</span>

文章目录

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

到年底了，打算重新制作一下个人博客园。美化过程中打算做一个类似于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

全部评论

相关推荐

11-18 23:00
已编辑
华中科技大学 C++
英伟达 c++ 春季实习 一面
一面回答得很烂，但还是收到二面邀约了。震惊了！！！请问有无大佬有二面相关的资料或者经验分享，4个小时的面试啊TAT，就当人生新体验了。---------------------------------------------------------------------英文自我介绍（没准备，所以磕磕绊绊说了点）面试官陈述：工作会和图形、操作系统、驱动有关实习经历相关问题（音视频相关）项目问题：线程池怎么设计的？线程池的组成？设计哪些关键组件来实现线程池？如何存放线程？如果有很多很多个任务，如何去管理？比如同时有很多任务来，假设有一千个，那这些任务如何给他储存或者管理？假设线程池是一个队列，如...
out11Man：四小时，恐怖如斯。大佬加油
查看25道真题和解析
点赞 评论 收藏
分享
10-03 22:04
西南大学 Web前端
点赞 评论 收藏
分享
11-10 22:06
上海震旦职业学院 前端工程师
导员貌似在催三方
😭😭😭我的秋招一塌糊涂啊
jack_miller：我给我们导员说我不在这里转正，可能没三方签了。导员说没事学校催的时候帮我想办法应付一下
点赞 评论 收藏
分享
11-18 17:02
北京理工大学 算法工程师
我的人生步伐是不是有点快
感觉我可能是我们这届人生进程最快的了，入职3个月左右干了好多大事。&nbsp;我的timeline：7月初：入职百度7月上旬：参与公司集中一周培训，了解到了公司文化、业务方向、公司战略、职业发展方向，印象最深的是在零度突破这个landing培训中，整个培训过程很有意思，类似王牌对王牌那种综艺，仿佛我们化身成沈腾或者节目嘉宾来一起做游戏，最后还要不同业务部门小伙伴完成一个课题，我们当时的课题是AI智能体，我们一组的有产品、有管理、有rd，做项目的交流过程中还是很有收获的，不光有了更全局的视角，还认识了好多小伙伴，包括我现在的女朋友。7月中下旬：跟着给我们分配的mentor做项目，虽然只是一个小模块，但是都...
在做测评的杨桃很想去东北泡澡：我劝你删了，因为我一个都还没有
百度成长空间 412人发布 百度工作体验
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
271588次浏览 2300人参与
# 如果实习可以转正，你会不会放弃秋招 #
205187次浏览 2793人参与
# 北方华创开奖 #
24055次浏览 261人参与
# 地方国企笔面经互助 #
3031次浏览 7人参与
# 学历or实习经历，哪个更重要 #
45411次浏览 345人参与
# 选完offer后，你后悔学本专业吗 #
15072次浏览 111人参与
# 0offer是寒冬太冷还是我太菜 #
890325次浏览 7945人参与
# 你觉得专业和学校哪个对薪资影响最大 #
28600次浏览 214人参与
# 查收我的offer竞争力报告 #
20535次浏览 259人参与
# 你最想要的公司福利是？ #
42681次浏览 152人参与
# 软开人，秋招你打算投哪些公司呢 #
40737次浏览 529人参与
# 如何一边实习一边秋招 #
988196次浏览 12614人参与
# 应届生被毁约被毁意向了怎么办 #
28614次浏览 244人参与
# 一觉醒来，我觉醒了超级打工人系统 #
3465次浏览 36人参与
# 当你面对裁员会如何？ #
26310次浏览 153人参与
# 来聊聊机械薪资天花板是哪家 #
66830次浏览 452人参与
# 没有实习经历，还有机会进大厂吗 #
807912次浏览 13863人参与
# 面试体验感最好的是哪家？ #
83924次浏览 820人参与
# 机械应届生薪资要多少才合适？ #
12597次浏览 61人参与
# 如何写一份好简历 #
606149次浏览 8529人参与
# 如果公司降薪，你会跳槽吗？ #
24965次浏览 237人参与
牛客网
牛客企业服务