目 录CONTENT

文章目录

给博客添加灯笼效果操作

在水一方
2022-01-08 / 0 评论 / 0 点赞 / 980 阅读 / 6,788 字 / 正在检测是否收录...

本文记录一下给网站添加一个新年快乐的灯笼特效具体操作为:

在header.ftl添加以下代码

image.png


        <#if settings.new_year == true>
           <!-- 新年灯笼开启 -->
           <div class="pc">
                    <div class="deng-box1 s1"
        style="position: fixed !important; top: -30px !important;left: 0px !important; width: 0;height: 0;">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">春</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
    <div class="deng-box s2" style="position: fixed ; top: -30px ;left: 150px ; width: 0;height: 0; ">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">节</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>



    <div class="deng-box1 s3" style="right: 341px;width: 0;height: 0;">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">快</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
    <div class="deng-box s4" style="right: 174px;width: 0;height: 0;">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">乐</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
          </div>
           <!-- 手机端 -->
             <div class="phone">
                    <div class="deng-box1 s1"
        style="position: fixed !important; top: -30px !important;left: 0px !important; width: 0;height: 0;">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">春节</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
    <div class="deng-box s2" style="position: fixed ; top: -30px ;left: 150px ; width: 0;height: 0; ">
        <div class="deng">
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">快乐</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
          </div>
    </#if>

二 在setting.yml中添加主题显示与否的控制

image.png

    new_year:
      name: new_year
      label: 新年灯笼
      type: switch
      data-type: bool
      default: false
      description: "是否打开新年灯笼"
      options:
        - value: true
          label: 开启
        - value: false
          label: 关闭

这里 new_year的位置不能靠近最左边,等和上面的对齐

保存后再设置主题---其他 拉到最下面就可以进行控制

image.png

加上css主题

image.png

.deng-box { position:fixed; top:-30px; right:-20px; z-index:999; width:12%; }
.deng-box1 { position:fixed; top:-30px; right:10px; z-index:999; width:12%; }
.deng-box1 .deng { position:relative; width:120px; height:90px; margin:50px; background:#d8000f; background:rgba(216,0,15,0.8); border-radius:50% 50%; animation:swing 5s infinite ease-in-out; transform-origin:50% -100px; -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%; animation:swing 3s infinite ease-in-out; transform-origin:50% -100px; -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; animation:swing 4s infinite ease-in-out; transform-origin:swing 4s infinite ease-in-out; -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:Arial,Lucida Grande,Tahoma,sans-serif; font-size:3.2rem; color:#dc8f03; font-weight:bold; line-height:85px; text-align:center; }
@keyframes swing {
  0% { transform:rotate(-10deg); -ms-transform:rotate(-10deg); }
  50% { transform:rotate(10deg); -ms-transform:rotate(10deg); }
  100% { transform:rotate(-10deg); -ms-transform:rotate(-10deg); }
}
@-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) }
}

/* ios手机端 */
@media screen and (min-width:320px) {
  .pc { display:none !important}
  .phone { display:block !important}
  .s3 { display:none !important}
  .s2 { left:195px !important }
    .deng-t {
    font-family: Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 41px !important;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
    width: 82px;
    text-indent: -38px;
  }
}
/* pc端 */
@media screen and (min-width:800px) {
  .pc { display:block !important }
  .phone { display:none !important }
  .s3 { display:block !important }
  .deng-t { font-size:2.2rem !important }
}

   

效果展示:

image.png

如果不需要展示在后台关闭即可

可参考文章链接:
https://cloud.tencent.com/developer/article/1936774

0

评论区