接上次分享的"有趣可调节的暗黑模式"文章，今天再给大家分享一个挺不错的白天夜晚模式自由切换的小组件。
老样子，如果喜欢可以直接拿去食用😎！
效果展示
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不错的白天夜晚切换模式 刘郎阁</title>
</head>
<body>
<div class="toolbar-link" onclick="changeMode()">
<label class="dark-mode ml-auto">
<input type="checkbox" checked="false">
<span></span>
</label>
</div>
<style>
body {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#f0f0f0;
transition:all 0.3s;
}
body.is-dark {
background:#3b3b41;
}
.toolbar-link {
display:flex;
justify-content:center;
align-items:center;
height:64px;
width:64px;
border-radius:9999px;
margin:0 4px;
transition:all .3s;
border: 1px solid #ffb62e;
}
.toolbar-link:hover {
background:#fff;
border-color:#ededed;
box-shadow:-1px 3px 10px 0 rgba(0,0,0,.06);
}
body.is-dark .toolbar-link:hover {
background:#28282b;
}
.dark-mode {
cursor:pointer;
transform:translate3d(0,0,0);
transform:scale(0.55);
}
.dark-mode input {
display:none;
}
.dark-mode input+span {
display:block;
border-radius:9999px;
width:36px;
height:36px;
position:relative;
box-shadow:inset 16px -16px 0 0 #ffd22e;
transform:scale(1) rotate(-2deg);
transition:box-shadow .5s ease 0s,transform .4s ease .1s;
}
.dark-mode input+span::before {
content:"";
width:inherit;
height:inherit;
border-radius:inherit;
position:absolute;
left:0;
top:0;
backface-visibility:hidden;
transition:background-color .3s ease;
}
.dark-mode input+span::after {
content:"";
width:8px;
height:8px;
border-radius:9999px;
margin:-4px 0 0 -4px;
position:absolute;
top:50%;
left:50%;
box-shadow:0 -23px 0 #ffb62e,0 23px 0 #ffb62e,23px 0 0 #ffb62e,-23px 0 0 #ffb62e,15px 15px 0 #ffb62e,-15px 15px 0 #ffb62e,15px -15px 0 #ffb62e,-15px -15px 0 #ffb62e;
transform:scale(0);
transition:all .3s ease;
}
.dark-mode input:checked+span {
box-shadow:inset 32px -32px 0 0 #ffd22e;
transform:scale(.5) rotate(0);
transition:transform .3s ease .1s,box-shadow .2s ease 0s;
}
.dark-mode input:checked+span::before {
background:#ffb62e;
backface-visibility:hidden;
transition:background-color .3s ease .1s;
}
.dark-mode input:checked+span::after {
transform:scale(1.5);
transition:transform .5s ease .15s;
}
</style>
<script>
var check = document.getElementsByTagName('input')[0];
function changeMode() {
if (check.checked) {
document.getElementsByTagName('body')[0].className = '';
} else {
document.getElementsByTagName('body')[0].className = 'is-dark';
}
}
</script>
</body>
</html>写在最后
根据你使用的平台/主题进行微调即可。
来学习了
😄终于去掉了这个验证。有时候确实得点几次
现在没有了😎
确实啊，每次评论都要点4,5次，严重打击评论的热情
已经去掉验证码这项功能，友友们可以愉快的玩耍了😄
你这个验证码我点了半分钟，离谱。改改把，真受不了
https://ufile.io/bic9xza0
9494。严重支持换验证方式。用老罗那种：极验证。
待考察🫣
消消气😳
感谢你的提醒😂 之前的那些验证系统不太理想所以…
这个验证码（pc端可能）有两个页面😂，找完第一个页面的图，过2秒左右会自动出现第二个页面，然后在提交😂😂😂😂