关于给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