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

效果图片展示

制作红灯笼

具体不做赘述了，贴出源码，可自行下载使用。
中国春节红灯笼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>
1
2
3
4
5
6
7
8
9
10

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.5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43