子比主题美化 迎新年 给网站左右两边各挂一个红灯笼 WordPress主题美化教程

前言

又快过年了，为了给网站增添喜庆，左右两边又可以挂一个红灯笼了，也是从别处看到的，特意分享给本站的用户，之前也分享过一个插件版的灯笼，有兴趣的可以看看

免费WordPress插件-节日灯笼插件,给主题美化增加喜庆挂件

明月资源网

03913

• 增加手机端适配，在PC端的基础上将灯笼的大小缩小为原来的0.66倍来适配PC端
• 增加了点击灯笼显示还有多少天过年
• 手机端透明度为PC端的0.5倍，防止遮挡视野
• 将位置设置成absolute绝对定位，当然你也可以弄成fixed固定

效果截图

使用教程

1、在子比主题自定义代码-自定义头部HTML代码中添加如下代码：

<div class="left-lantern lantern">
      <!-- 顶部绳索 -->
      <div class="lantern-rope lantern-top-rope "></div>
      <!-- 提手 -->
      <div class="lantern-handle lantern-top-handle"></div>
      <!-- 中间部分 -->
      <div class="lantern-center">新年</div>
      <!-- 下提手 -->
      <div class="lantern-handle lantern-bottom-handle"></div>
      <!-- 绳 -->
      <div class="lantern-bottom">
        <div class="lantern-rope lantern-bottom-rope"></div>
        <!-- 灯穗 -->
        <div class="lantern-panicle"></div>
      </div>
    </div>
    <div class="right-lantern lantern">
      <!-- 顶部绳索 -->
      <div class="lantern-rope lantern-top-rope "></div>
      <!-- 提手 -->
      <div class="lantern-handle lantern-top-handle"></div>
      <!-- 中间部分 -->
      <div class="lantern-center">快乐</div>
      <!-- 下提手 -->
      <div class="lantern-handle lantern-bottom-handle"></div>
      <!-- 绳 -->
      <div class="lantern-bottom">
        <div class="lantern-rope lantern-bottom-rope"></div>
        <!-- 灯穗 -->
        <div class="lantern-panicle"></div>
      </div>
    </div>

2、在自定义CSS样式中添加如下代码：

3、在自定义javascript代码中添加如下代码：