给博客加个喜庆的春节红灯笼分享

2023年1月23日12:04:31给博客加个喜庆的春节红灯笼分享已关闭评论
广告也精彩

这个春节有点长，大伙都上班了吗？最近看到很多网站都挂了灯笼，感兴趣的照下文添加吧。

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

  1. <!-- 灯笼1 -->
  2. <div class="deng-box">
  3.     <div class="deng">
  4.         <div class="xian"></div>
  5.         <div class="deng-a">
  6.             <div class="deng-b"><div class="deng-t">节</div></div>
  7.         </div>
  8.         <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  9.     </div>
  10. </div>
  12. <!-- 灯笼2 -->
  13. <div class="deng-box1">
  14.     <div class="deng">
  15.         <div class="xian"></div>
  16.         <div class="deng-a">
  17.             <div class="deng-b"><div class="deng-t">春</div></div>
  18.         </div>
  19.         <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  20.     </div>
  21. </div>

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

如果只想在首页显示灯笼，可以用下面的判断语句把HTML代码包裹起来：

  1. <?php if (is_home()) { ?>
  2. <!-- 代码放这里 -->
  3. <?php } ?>

将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中，点击“发布”即可。

  1. .deng-box {
  2.     position: fixed;
  3.     top: -40px;
  4.     rightright: -20px;
  5.     z-index: 1999;
  6. }
  8. .deng-box1 {
  9.     position: fixed;
  10.     top: -30px;
  11.     rightright: 10px;
  12.     z-index: 1999;
  13. }
  15. .deng-box1 .deng {
  16.     position: relative;
  17.     width: 120px;
  18.     height: 90px;
  19.     margin: 50px;
  20.     background: #d8000f;
  21.     background: rgba(216, 0, 15, 0.8);
  22.     border-radius: 50% 50%;
  23.     -webkit-transform-origin: 50% -100px;
  24.     -webkit-animation: swing 5s infinite ease-in-out;
  25.     animation: swing 5s infinite ease-in-out;
  26.     box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  27. }
  29. .deng {
  30.     position: relative;
  31.     width: 120px;
  32.     height: 90px;
  33.     margin: 50px;
  34.     background: #d8000f;
  35.     background: rgba(216, 0, 15, 0.8);
  36.     border-radius: 50% 50%;
  37.     -webkit-transform-origin: 50% -100px;
  38.     -webkit-animation: swing 3s infinite ease-in-out;
  39.     animation: swing 3s infinite ease-in-out;
  40.     box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  41. }
  43. .deng-a {
  44.     width: 100px;
  45.     height: 90px;
  46.     background: #d8000f;
  47.     background: rgba(216, 0, 15, 0.1);
  48.     margin: 12px 8px 8px 10px;
  49.     border-radius: 50% 50%;
  50.     border: 2px solid #dc8f03;
  51. }
  53. .deng-b {
  54.     width: 45px;
  55.     height: 90px;
  56.     background: #d8000f;
  57.     background: rgba(216, 0, 15, 0.1);
  58.     margin: -4px 8px 8px 26px;
  59.     border-radius: 50% 50%;
  60.     border: 2px solid #dc8f03;
  61. }
  63. .xian {
  64.     position: absolute;
  65.     top: -20px;
  66.     left: 60px;
  67.     width: 2px;
  68.     height: 20px;
  69.     background: #dc8f03;
  70. }
  72. .shui-a {
  73.     position: relative;
  74.     width: 5px;
  75.     height: 20px;
  76.     margin: -5px 0 0 59px;
  77.     -webkit-animation: swing 4s infinite ease-in-out;
  78.     -webkit-transform-origin: 50% -45px;
  79.     background: #ffa500;
  80.     border-radius: 0 0 5px 5px;
  81. }
  83. .shui-b {
  84.     position: absolute;
  85.     top: 14px;
  86.     left: -2px;
  87.     width: 10px;
  88.     height: 10px;
  89.     background: #dc8f03;
  90.     border-radius: 50%;
  91. }
  93. .shui-c {
  94.     position: absolute;
  95.     top: 18px;
  96.     left: -2px;
  97.     width: 10px;
  98.     height: 35px;
  99.     background: #ffa500;
  100.     border-radius: 0 0 0 5px;
  101. }
  103. .deng:before {
  104.     position: absolute;
  105.     top: -7px;
  106.     left: 29px;
  107.     height: 12px;
  108.     width: 60px;
  109.     content: " ";
  110.     display: block;
  111.     z-index: 1999;
  112.     border-radius: 5px 5px 0 0;
  113.     border: solid 1px #dc8f03;
  114.     background: #ffa500;
  115.     background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  116. }
  118. .deng:after {
  119.     position: absolute;
  120.     bottombottom: -7px;
  121.     left: 10px;
  122.     height: 12px;
  123.     width: 60px;
  124.     content: " ";
  125.     display: block;
  126.     margin-left: 20px;
  127.     border-radius: 0 0 5px 5px;
  128.     border: solid 1px #dc8f03;
  129.     background: #ffa500;
  130.     background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  131. }
  133. .deng-t {
  134.     font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  135.     font-size: 3.2rem;
  136.     color: #dc8f03;
  137.     font-weight: bold;
  138.     line-height: 85px;
  139.     text-align: center;
  140. }
  142. .night .deng-t,
  143. .night .deng-box,
  144. .night .deng-box1 {
  145.     background: transparent !important;
  146. }
  148. @keyframes swing {
  149.     0% { transform: rotate(-10deg) }
  150.     50% { transform: rotate(10deg) }
  151.     100% { transform: rotate(-10deg) }
  152. }
  154. @-moz-keyframes swing {
  155.     0% { -moz-transform: rotate(-10deg) }
  156.     50% { -moz-transform: rotate(10deg) }
  157.     100% { -moz-transform: rotate(-10deg) }
  158. }
  160. @-webkit-keyframes swing {
  161.     0% { -webkit-transform: rotate(-10deg) }
  162.     50% { -webkit-transform: rotate(10deg) }
  163.     100% { -webkit-transform: rotate(-10deg) }
  164. }

也可以将样式代码直接加到主题样式文件style.css的最后。可能灯笼上的文字字号在有些主题上有点大，可以适当修改第133行的字号：font-size: 3.2rem;

如果被其他图层挡住了，请修改5，12，111行 z-index 的值。

如果只想在首页显示灯笼，可以用下面的判断语句把上面的代码包裹起来：

  1. <?php if (is_home()) { ?>
  2. <!-- 代码放这里 -->
  3. <?php } ?>

手机移动端不显示：

  1. <?php if (!wp_is_mobile()) { ?>
  2. <!-- 代码放这里 -->
  3. <?php } ?>

 



微信扫描下方的二维码阅读本文

ts小陈