如何做网站美化，怎样做博客美化，添加白天黑夜切换按钮。夜晚是夜晚月亮图标，白天是白天太阳图标，看到很多的WP主题网站，在用白天黑夜切换特效，好奇心来了，一不小心我就扒下来了。代码超级简单，完整的代码如下；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<title>全民博客</title>
<script type="text/javascript">
localStorage.getItem("data-night") && document.querySelector("html").setAttribute("data-night", "night");
</script>
<script src="http://nidecms.com/ueditor/jquery.min.js"></script>
<style type="text/css">
@charset "utf-8";a{color:var(--main);outline:none;text-decoration:none;transition:all .3s linear}
a:hover{color:#09f;text-decoration:none}
*{margin:0;padding:0}
.rightFloatArea{position:fixed;bottom:90px;right:30px;z-index:333}
.rightFloatBox{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}
.rightFloatBox svg{position:absolute;width:25px;height:25px;fill:var(--theme)}
.rightFloatBox.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s,-webkit-transform 0.35s;transition:visibility 0.35s,transform 0.35s;transition:visibility 0.35s,transform 0.35s,-webkit-transform 0.35s}
.rightFloatBox.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}
.rightFloatBox.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s,-webkit-transform 0.85s;transition:transform 0.85s,opacity 0.85s;transition:transform 0.85s,opacity 0.85s,-webkit-transform 0.85s}
.rightFloatBox.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}
.newsReplyBox{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px;margin-bottom:15px}
.newsReplyTitle{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}
html{--theme:#409eff;--background:#fff;--main:#303133;--routine:#606266;--minor:#909399;--seat:#c0c4cc;--classA:#dcdfe6;--classB:#e4e7ed;--classC:#ebeef5;--classD:#f2f6fc;--radius-wrap:8px;--radius-inner:4px;--text-shadow:0 1px 2px rgba(0,0,0,0.25);--box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22)}
html[data-night='night'] body{--theme:#54b5db;--background:#232323;--main:#999;--routine:#888;--minor:#777;--seat:#666;--classA:#515253;--classB:#454545;--classC:#414243;--classD:#303030;--text-shadow:none;--box-shadow:none}
html[data-night='night'] body::before{background:#121212;z-index:-500}
html[data-night='night'] .topNavLogo img{display:none}
html[data-night='night'] .topNavLogo svg{display:block}
html[data-night='night'] .newsContent-video .episodes .box .item:not(.active){background:var(--classC)}
html[data-night='night'] .newsContent blockquote{background:var(--classD);color:var(--routine);border-color:var(--classA)}
html[data-night='night'] .newsContent code:not([class]){background:#fdf0ec38;color:#a6aba8}
html[data-night='night'] .newsContent-anote{color:#ffffff9c}
html[data-night='night'] .newsContent-abtn{color:#ffffff9c}
html[data-night='night'] .newsDescWrapper{background:var(--classD)}
body{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none}
</style>
</head>
<body style="height:3500px">
<div class="rightFloatArea">
<div class="rightFloatBox scroll">
<!-- 火箭图标 -->
<svg viewBox="0 0 1024 1024" xmlns="https://www.w3.org/2000/svg" width="25" height="25">
<path d="M725.902 498.916c18.205-251.45-93.298-410.738-205.369-475.592l-6.257-3.982-6.258 3.414c-111.502 64.853-224.711 224.142-204.8 475.59-55.751 53.476-80.214 116.623-80.214 204.8v15.36l179.2-35.27c11.378 40.39 58.596 69.973 113.21 69.973 54.613 0 101.262-29.582 112.64-68.836l180.337 36.41v-15.36c-.569-89.885-25.031-153.6-82.489-206.507zM571.733 392.533c-33.564 31.29-87.04 28.445-118.329-5.12s-28.444-87.04 5.12-117.76c33.565-31.289 87.04-28.444 118.33 5.12s28.444 86.471-5.12 117.76zm-56.32 368.64c-35.84 0-64.284 29.014-64.284 64.285 0 35.84 54.044 182.613 64.284 182.613s64.285-146.773 64.285-182.613c0-35.271-29.014-64.285-64.285-64.285z"></path>
</svg>
</div>
<div class="rightFloatBox mode">
<!-- 夜晚月亮图标 -->
<svg class="icoNight" viewBox="0 0 1024 1024" xmlns="https://www.w3.org/2000/svg" width="25" height="25">
<path d="M587.264 104.96c33.28 57.856 52.224 124.928 52.224 196.608 0 218.112-176.128 394.752-393.728 394.752-29.696 0-58.368-3.584-86.528-9.728C223.744 832.512 369.152 934.4 538.624 934.4c229.376 0 414.72-186.368 414.72-416.256 1.024-212.992-159.744-389.12-366.08-413.184z"></path>
<path d="M340.48 567.808l-23.552-70.144-70.144-23.552 70.144-23.552 23.552-70.144 23.552 70.144 70.144 23.552-70.144 23.552-23.552 70.144zM168.96 361.472l-30.208-91.136-91.648-30.208 91.136-30.208 30.72-91.648 30.208 91.136 91.136 30.208-91.136 30.208-30.208 91.648z"></path>
</svg>
<!-- 白天太阳图标 -->
<svg class="icoDay active" viewBox="0 0 1024 1024" xmlns="https://www.w3.org/2000/svg" width="25" height="25">
<path d="M234.24 512a277.76 277.76 0 1 0 555.52 0 277.76 277.76 0 1 0-555.52 0zM512 187.733a42.667 42.667 0 0 1-42.667-42.666v-102.4a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 187.733zm-258.987 107.52a42.667 42.667 0 0 1-29.866-12.373l-72.96-73.387a42.667 42.667 0 0 1 59.306-59.306l73.387 72.96a42.667 42.667 0 0 1 0 59.733 42.667 42.667 0 0 1-29.867 12.373zm-107.52 259.414H42.667a42.667 42.667 0 0 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zm34.134 331.946a42.667 42.667 0 0 1-29.44-72.106l72.96-73.387a42.667 42.667 0 0 1 59.733 59.733l-73.387 73.387a42.667 42.667 0 0 1-29.866 12.373zM512 1024a42.667 42.667 0 0 1-42.667-42.667V878.507a42.667 42.667 0 0 1 85.334 0v102.826A42.667 42.667 0 0 1 512 1024zm332.373-137.387a42.667 42.667 0 0 1-29.866-12.373l-73.387-73.387a42.667 42.667 0 0 1 0-59.733 42.667 42.667 0 0 1 59.733 0l72.96 73.387a42.667 42.667 0 0 1-29.44 72.106zm136.96-331.946H878.507a42.667 42.667 0 1 1 0-85.334h102.826a42.667 42.667 0 0 1 0 85.334zM770.987 295.253a42.667 42.667 0 0 1-29.867-12.373 42.667 42.667 0 0 1 0-59.733l73.387-72.96a42.667 42.667 0 1 1 59.306 59.306l-72.96 73.387a42.667 42.667 0 0 1-29.866 12.373z"></path>
</svg>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
localStorage.getItem("data-night") ?
($(".rightFloatBox.mode .icoNight").addClass("active"), $(".rightFloatBox.mode .icoDay").removeClass("active")) :
($("html").removeAttr("data-night"), $(".rightFloatBox.mode .icoNight").removeClass("active"), $(".rightFloatBox.mode .icoDay").addClass("active")), $(".rightFloatBox.mode").on("click", () => {
localStorage.getItem("data-night") ?
($(".rightFloatBox.mode .icoNight").removeClass("active"), $(".rightFloatBox.mode .icoDay").addClass("active"), $("html").removeAttr("data-night"), localStorage.removeItem("data-night")) :
($(".rightFloatBox.mode .icoNight").addClass("active"), $(".rightFloatBox.mode .icoDay").removeClass("active"), $("html").attr("data-night", "night"), localStorage.setItem("data-night", "night"))
}),
$(".topSearchBox .input").on("click", e => {
e.stopPropagation(), $(".topSearchBox .result").addClass("active")
}), $(document).on("click", function() {
$(".topSearchBox .result").removeClass("active")
}), $(".navSubMenuBox").each(function(e, t) {
const o = $(this).find(".navSubMenuItem"),
a = $(t).attr("trigger") || "click",
n = $(t).attr("placement") || $(this).height() || 0;
o.css("top", n), "hover" === a ? $(this).hover(() => $(this).addClass("active"), () => $(this).removeClass("active")) : ($(this).on("click", function(e) {
$(this).toggleClass("active"), $(document).one("click", () => $(this).removeClass("active")), e.stopPropagation()
}), o.on("click", e => e.stopPropagation()))
}); {
let e = null;
const t = () => (document.documentElement.scrollTop || document.body.scrollTop) > 300 ? $(".rightFloatBox.scroll").addClass("active") : $(".rightFloatBox.scroll").removeClass("active");
t(), $(document).on("scroll", () => {
clearTimeout(e), e = setTimeout(t, 80)
}), $(".rightFloatBox.scroll").on("click", () => window.scrollTo({
top: 0,
behavior: "smooth"
}))
}
});
</script>
</body>
</html>
温馨提示：点击运行代码后，并不是白屏哦，白天黑夜切换，切换按钮在右下角啊。
值得学习，这个代码，切换白天黑夜时，刷新网页是不会变的，刷新后切换效果不会被重置。但有一个小问题，那就是这个切换效果，不需要两个，甚至是两个以上的CSS文件，虽然能够提升网页加载速度，但是这就意味着，这个CSS里面得要写两份样式才能达到切换效果。
只能满足部分需求，只能满足部分站长。在很多网站中，很多的站长，就是想要这样的效果，就是毫无花俏的白色背景和黑色背景之间切换。那这个既简单，又精简的代码就非常适合你。如果，你有更高的追求，想要两个，甚至是多个CSS样式的，那可能就满足不了你的需求。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）