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