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

410 阅读5分钟
前言: 有段时间没折腾过博客页面样式了,偶然间看到了一个春节红灯笼的小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函数,原理一致,这里就不赘述了,可自行参考添加。

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