新年为博客网站加2个春节快乐灯笼挂件

快新年了，为博客加2个CSS写的灯笼，原代码来自知更鸟(鸟叔)，这里改了一下，放在两边，字体加缩小了能放下两个字，还有灯笼线，还有手机端不显示。

教程：把html代码放到主题页脚文件(footer.php)，</body>前面，然后到CSS样式代码放在后台外观，自定义里的额外CSS里面，begin主题的话可直接放在主题选项里的定制样式的css里即可。

Html代码：

<!-- 灯笼 1 -->  <div class="deng-box">      <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>          <div class="shui shui-b"></div>          <div class="shui shui-c"></div>      </div>  </div>  <!-- 灯笼 2 -->  <div class="deng-box1">      <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>          <div class="shui shui-b"></div>          <div class="shui shui-c"></div>      </div>  </div>

css代码：

.xian {      position: absolute;      top: -20px;      left: 60px;      width: 2px;      height: 20px;      background: #dc8f03;  }  .deng-box {      position: fixed;      top: -30px;      z-index: 999;  }  .deng-box1 {      position: fixed;      top: -30px;      rightright: 0px;      z-index: 999;  }  .deng-box1 .deng {      position: relative;      width: 120px;      height: 90px;      margin: 50px;      background: #d8000f;      background: rgba(216, 0, 15, 0.9);      border-radius: 50% 50%;      -webkit-transform-origin: 50% -100px;      -webkit-animation: swing 5s infinite ease-in-out;      box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);  }  .deng {      position: relative;      width: 120px;      height: 90px;      margin: 50px;      background: #d8000f;      background: rgba(216, 0, 15, 0.9);      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.2);      margin: 12px 8px 8px 8px;      border-radius: 50% 50%;      border: 2px solid #dc8f03;  }  .deng-b {      width: 45px;      height: 90px;      background: #d8000f;      background: rgba(216, 0, 15, 0.2);      margin: -4px 8px 8px 26px;      border-radius: 50% 50%;      border: 2px solid #dc8f03;  }  .shui {      width: 5px;      height: 40px;      background: #ffa500;      border-radius: 0 0 5px 5px;  }  .shui-a {      margin: -10px 0 0 40px;      -webkit-animation: swing 4s infinite ease-in-out;      -webkit-transform-origin: 50% -20px;  }  .shui-b {      margin: -35px 0 0 59px;      -webkit-animation: swing 4s infinite ease-in-out;      -webkit-transform-origin: 50% -45px;  }  .shui-c {      margin: -45px 0 0 77px;      -webkit-animation: swing 4s infinite ease-in-out;      -webkit-transform-origin: 50% -25px;  }  .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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);  }  .deng:after {      position: absolute;      bottombottom: -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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);  }  .deng-t {      font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;      font-size: 1.8rem;      color: #dc8f03;      font-weight: bold;      line-height: 85px;      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)      }  }