关于给hexo博客增加节日气氛主题切换（包括中国春节和圣诞节）

前言: 有段时间没折腾过博客页面样式了，偶然间看到了一个春节红灯笼的小demo，感觉很棒，所以拿过来了，并且自己新增了一些小挂件，加上了关键帧动画，圣诞树等元素。主题切换按钮原理和以前教程里面提到的暗夜模式一样。

效果图片展示

制作红灯笼

具体不做赘述了，贴出源码，可自行下载使用。
中国春节红灯笼demo源码

制作切换按钮和小挂件

html结构

<!-- 春节主题 按钮 -->
<a onclick="switchThemes()" id="switchspring">
    <img class="chunjiepic" src="https://nekodeng.gitee.io/medias/spring-img/caishen.png" title="节日模式">
</a>
<!-- 春节主题 小挂件 -->
<div class="caishendeng">        
    <div class="caishenxian">
        <img class="caishenpic lala" src="https://nekodeng.gitee.io/medias/spring-img/caishen.png">
    </div>              
</div>

css表现

    /*春节模式 */
    #switchspring {
        background: #dc8f03;
        width: 38px;
        height: 38px;
        display: block;
        position: fixed;
        border-radius: 50%;
        right: 15px;
        bottom: 125px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
        cursor: pointer;
    }
    .chunjiepic {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        position: absolute;
        bottom: 0px;
    }
    /*春节主题 挂件吊线*/
    .caishenxianleft {
        left: 16%!important;
        position: absolute;
        top: 0px;
        width: 2px;
        height: 20px;
        background: #dc8f03;
        transform-origin: 50% -100px;
        animation: swing 3.5s infinite ease-in-out;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3.5s infinite ease-in-out;
    }
    .caishenxian {
        position: absolute;
        top: 0px;
        right: 20%;
        width: 2px;
        height: 20px;
        background: #dc8f03;
        transform-origin: 50% -100px;
        animation: swing 3.5s infinite ease-in-out;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3.5s infinite ease-in-out;
    }
    .guguxian {
        position: absolute;
        top: 0px;
        left: 20%;
        width: 2px;
        height: 20px;
        background: #dc8f03;
        transform-origin: 50% -100px;
        animation: swing 3.5s infinite ease-in-out;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3.5s infinite ease-in-out;
    }
    .wenzhangxian {
        left: 50%!important;
        z-index: 998;
    }
    /*春节主题 挂件*/
    .fudai {
        top: 14px!important;
        left: -22px!important;
    }
    .caishenpic {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: absolute;
        top: 12px;
        right: -22px;
        z-index: 9;
        /* transform-origin: 50% -100px; */
        animation: swing 3.5s infinite ease-in-out;
        /* -webkit-transform-origin: 50% -100px; */
        -webkit-animation: swing 3.5s infinite ease-in-out;
    }
    .lala {
        width: 32px!important;
        height: 32px!important;
        opacity: 1!important;
        left: -4px!important;
        top: 14px!important;
    }
    .chunp {
        width: 216px!important;
        height: 96px!important;
        left: -80px!important;
        top: 6px!important;
    }
    .fudao {
        width: 38px;
        height: 38px;
        top: 18px!important;
        left: -19px!important;
    }
    /* 点击显示或者隐藏总样式开始 */
    .caishendeng,
    .xiaomaozitx,
    .labelmz,
    .friendmz
    {
        display: none;
    }
    body.themespring .caishendeng,
    body.themespring .xiaomaozitx,
    body.themespring .labelmz,
    body.themespring .friendmz
    {
        display: block;
    }
    /* 点击显示或者隐藏总样式结束 */
    .toupic {
        position: relative;
    }
    .xiaomaozitx {
        width: 60px;
        height: 60px;
        position: absolute;
        top: -127px;
        right: 25%;
        transform: rotate(40deg);
        position: absolute;
        z-index: 99;
        -webkit-animation: mzanimate 1.2s infinite ease-in-out;
    }
    .labelmz {
        width: 34px;
        height: 34px;
        position: absolute;
        top: 7px;
        right: -84px;
        transform: rotate(40deg);
        position: absolute;
        z-index: 99;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: mzanimate 1.8s infinite ease-in-out;
    }
    .weilemz {
        position: relative;
    }
    .friendmz {
        width: 50px!important;
        height: 50px!important;
        position: absolute;
        top: 8px;
        right: -90px;
        transform: rotate(44deg);
        position: absolute;
        z-index: 99;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: mzanimate 1.8s infinite ease-in-out;
    }
    .lions {
        width: 32px!important;
        height: 32px!important;
        opacity: 1!important;
        left: -15px!important;
        top: 14px!important;
    }
    .fenleiss {
        position: absolute;
        top: -64px;
        left: 20%;
        width: 2px;
        height: 20px;
        background: #dc8f03;
        transform-origin: 50% -100px;
        animation: swing 3.5s infinite ease-in-out;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3.5s infinite ease-in-out;
    }
    .gugus {
        width: 32px!important;
        height: 32px!important;
        opacity: 1!important;
        left: -15px!important;
        top: 9px!important;
    }
    .huadengpic {
        width: 40px!important;
        height: 40px!important;
        opacity: 1!important;
        left: -18px!important;
        top: 9px!important;
    }
    .shanzipic {
        width: 40px!important;
        height: 40px!important;
        opacity: 1!important;
        left: -18px!important;
        top: 18px!important;
    }

    .denglong {
        display: none;
    }
    body.themespring .denglong {
        display: block;
    }
    @media only screen and (min-width: 1124px) {
        .nav-menu {
            padding-right: 0px;
        }
        body.themespring .nav-menu {
            padding-right: 96px;
        }
    }
    @media only screen and (max-width: 760px) {
        .deng-box, .deng-box1 {
            width: 40%;
        }
        body.themespring .right {
            float: left!important;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .right {
            float: left!important;
        }
    }
    .deng-box {
        position: fixed;
        top: -40px;
        right: -20px;
        z-index: 999;
    }
    .deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 999;
    }
    .deng-box1 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
    }
    .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
    }
    .deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        margin: 12px 8px 8px 10px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03;
    }
    .deng-b {
        width: 45px;
        height: 90px;
        background: #d8000f;
        background: rgba(216, 0, 15, 0.1);
        margin: -4px 8px 8px 26px;
        border-radius: 50% 50%;
        border: 2px solid #dc8f03;
    }
    .xian {
        position: absolute;
        top: -20px;
        left: 60px;
        width: 2px;
        height: 20px;
        background: #dc8f03;
    }
    .shui-a {
        position: relative;
        width: 5px;
        height: 20px;
        margin: -5px 0 0 59px;
        -webkit-animation: swing 4s infinite ease-in-out;
        -webkit-transform-origin: 50% -45px;
        background: #ffa500;
        border-radius: 0 0 5px 5px;
    }
    .shui-b {
        position: absolute;
        top: 14px;
        left: -2px;
        width: 10px;
        height: 10px;
        background: #dc8f03;
        border-radius: 50%;
    }
    .shui-c {
        position: absolute;
        top: 18px;
        left: -2px;
        width: 10px;
        height: 35px;
        background: #ffa500;
        border-radius: 0 0 0 5px;
    }
    .deng:before {
        position: absolute;
        top: -7px;
        left: 29px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        z-index: 999;
        border-radius: 5px 5px 0 0;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    }
    .deng:after {
        position: absolute;
        bottom: -7px;
        left: 10px;
        height: 12px;
        width: 60px;
        content: " ";
        display: block;
        margin-left: 20px;
        border-radius: 0 0 5px 5px;
        border: solid 1px #dc8f03;
        background: #ffa500;
        background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    }
    .deng-t {
        font-family: 华文行楷;
        font-size: 26px;
        color: #dc8f03;
        font-weight: bold;
        line-height: 44px;
        text-align: center;
    }
    .night .deng-t,
    .night .deng-box,
    .night .deng-box1 {
        background: transparent !important;
    }
    @-moz-keyframes swing {
        0% {
                -moz-transform: rotate(-10deg)
        }
        50% {
            -moz-transform: rotate(10deg)
        }
        100% {
                -moz-transform: rotate(-10deg)
        }
    }
    @-webkit-keyframes swing {
        0% {
                -webkit-transform: rotate(-10deg)
        }
        50% {
                -webkit-transform: rotate(10deg)
        }
        100% {
                -webkit-transform: rotate(-10deg)
        }
    }

js行为

    // 网站主题切换模式开始
    if (localStorage.getItem('themespring') === '1') {
        document.body.classList.add('themespring');
        }
        else if (matchMedia('(prefers-color-scheme: themespring)').matches) {
        document.body.classList.add('themespring');
    }

    function switchThemes() {
        var body = document.body;
        if(body.classList.contains('themespring')){
          document.body.classList.remove('themespring');
          localStorage.setItem('themespring','0');
          return;
        } else {
          document.body.classList.add('themespring');
          localStorage.setItem('themespring','1');
          return;
        }
      };
    // 网站主题切换模式结束

如何使用

在你想要添加小挂件的html结构位置处添加即可。小挂件通用结构如下，只需修改图片即可。

<!-- 春节主题 小挂件 -->
<div class="caishendeng">        
    <div class="caishenxian">
        <img class="caishenpic lala" src="https://nekodeng.gitee.io/medias/spring-img/caishen.png">
    </div>              
</div>

关于圣诞主题

圣诞主题内和上述春节主题原理一样，只需更换小挂件的图片即可，然后新增一个圣诞主题按钮a标签，在js文件中新增一个function函数，原理一致，这里就不赘述了，可自行参考添加。

总结：不限主题，直接粘贴上述代码即可。