网站添加国庆/新春灯笼代码，给网站增添节日气氛

时间：2024-01-21 21:46热度：848

‌ ‌最近看到很多网站都挂了灯笼，搬过来水篇文章，最初出处也无从考证了，修复了一点兼容性问题，共分享两种方法，各有各的优势，站长朋友可以自行取舍，不过展示效果都差不多。感兴趣的照下文添加吧，效果如图所示。方法一：第一步、添加HTML代码将下面的HTML代码添加到主题页脚模板footer.php，标签的上面。庆

　　‌ ‌最近看到很多网站都挂了灯笼，搬过来水篇文章，最初出处也无从考证了，修复了一点兼容性问题，共分享两种方法，各有各的优势，站长朋友可以自行取舍，不过展示效果都差不多。感兴趣的照下文添加吧，效果如图所示。

方法一：

第一步、添加HTML代码

　　将下面的HTML代码添加到主题页脚模板footer.php，</body>标签的上面。

<!-- 灯笼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 class="shui-c"></div><div class="shui-b"></div></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 class="shui-c"></div><div class="shui-b"></div></div>

    </div>

</div>

　　因为代码中有中文，编辑后需要将模板文件保存为UTF-8 无BOM（无签名）的格式，后台主题编辑中修改可以忽略，上面的代码可以只加一个，个人感觉挂两个灯笼更灵动些。

第二步、添加样式

　　将样式代码添加到网站CSS 中。

.deng-box {

    position: fixed;

    top: -40px;

    right: -20px;

    z-index: 1999;

}

 

.deng-box1 {

    position: fixed;

    top: -30px;

    right: 10px;

    z-index: 1999;

}

 

.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;

    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;

    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: 1999;

    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;

}

 

.night .deng-t, 

.night .deng-box, 

.night .deng-box1 {

    background: transparent !important;

}

 

@keyframes swing { 

    0% { transform: rotate(-10deg) } 

    50% { transform: rotate(10deg) } 

    100% { 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) }

}

　　可能灯笼上的文字字号在有些主题上有点大，可以适当修改第133行的字号：font-size: 3.2rem; 如果被其他图层挡住了，请修改5，12，111行 z-index 的值。

方法二：

　　这个灯笼只是简单应用一下CSS3动画，纯HTML+CSS，具体实现方法，看下面的代码，给网站挂上新春灯笼，顶部左右两边新年快乐代码。同理，改成国庆快乐四个字也是可以了，或者改成只显示两个灯笼。

<div class="deng-box2">

  <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-box3">

  <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">

  <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">

  <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>

<style type="text/css">.deng-box {

  position: fixed;

  top: -40px;

  right: -20px;

  z-index: 9999;

  pointer-events: none

}

 

.deng-box1 {

  position: fixed;

  top: -30px;

  right: 10px;

  z-index: 9999;

  pointer-events: none

}

 

.deng-box2 {

  position: fixed;

  top: -40px;

  left: -20px;

  z-index: 9999;

  pointer-events: none

}

 

.deng-box3 {

  position: fixed;

  top: -30px;

  left: 10px;

  z-index: 9999;

  pointer-events: none

}

 

.deng-box1 .deng, .deng-box3 .deng {

  position: relative;

  width: 120px;

  height: 90px;

  margin: 50px;

  background: #d8000f;

  background: rgba(216, 0, 15, .8);

  border-radius: 50% 50%;

  -webkit-transform-origin: 50% -100px;

  -webkit-animation: swing 5s infinite ease-in-out;

  box-shadow: -5px 5px 30px 4px #fc903d

}

 

.deng {

  position: relative;

  width: 120px;

  height: 90px;

  margin: 50px;

  background: #d8000f;

  background: rgba(216, 0, 15, .8);

  border-radius: 50% 50%;

  -webkit-transform-origin: 50% -100px;

  -webkit-animation: swing 3s infinite ease-in-out;

  box-shadow: -5px 5px 50px 4px #fa6c00

}

 

.deng-a {

  width: 100px;

  height: 90px;

  background: #d8000f;

  background: rgba(216, 0, 15, .1);

  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, .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: orange;

  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: orange;

  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: orange;

  background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #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: orange;

  background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)

}

 

.deng-t {

  font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;

  font-size: 3.2rem;

  color: #dc8f03;

  font-weight: 700;

  line-height: 85px;

  text-align: center

}

 

.night .deng-box, .night .deng-box1, .night .deng-t {

  background: 0 0 !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)

  }

}</style>

　　复制代码放到底部模板文件里面即可。