给博客挂上赛博灯笼吧

写在前面

本站的第一篇文章给你的网站挂上灯笼吧 – 阿草Mimosa的小屋,已经实现赛博灯笼的效果了,过年挂灯笼也成为这个网站的传统了。

但是,这玩意的初始代码是我从csdn的某篇不知名文章中找的。毕竟这段灯笼的HTML早已经烂大街了,网上各种文章几乎都是一样的。

尽管如此,它还有很多问题,比如某些元素的位移问题;还有字体问题,它默认使用加粗的行楷字体:

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

但在大多数移动端浏览器中,因为没有“华文行楷”字体文件而被迫使用本地的系统默认字体,这样出来的效果并不美观(毕竟谁家贴的福字用方方正正的黑体呀)

而我们只需要在灯笼上显示“春节快乐”四个字,若直接引用包含全部字符集的“华文行楷”字体文件的话,文件体积太大,浪费服务器资源

于是,我创建了一个仅包含“春节快乐”四个字的字体子集。因此更换其他文字就会失去“华文行楷”的字体效果。若更换其他汉字,可到代码中“灯笼专用字体”注释那儿导入其他完整的字体文件

(我是去这儿定制字体文件的:创建由 TTF 字体的字形组成的 TTF 个字体子集 | Aspose


除此之外,考虑到灯笼尺寸过大会影响手机端的操作和观感,我还通过mobile-detect.js增加了设备判断,让灯笼仅在电脑端生效。

现成的预制灯笼

多的就不说了,如有需要的话可以把下边的预制灯笼挂到自己的网站上(随便在主题文件的页头或页脚插入就行,只要在<body>内即可)

无设备检测(电脑、手机、平板均生效)

<!-- *注:由于我定制只有“春节快乐”四个字的字符集,导致更换其他文字就会失去“华文行楷”的字体效果。若更换其他汉字,可到“灯笼专用字体”注释那儿导入其他完整的字体文件* -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 灯笼1-乐 -->
<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>
 
<!-- 灯笼2-快 -->
<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>
 
<!-- 灯笼3-节 -->
<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>
 
<!-- 灯笼4-春 -->
<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>
 
<style>
.deng-box {
  position: fixed;
  top: -40px;
  left: 55px;
  z-index: 9999;
  pointer-events: none;
}
 
.deng-box1 {
  position: fixed;
  top: -30px;
  left: -50px;
  z-index: 9999;
  pointer-events: none;
}
 
.deng-box2 {
  position: fixed;
  top: -30px;
  right: 55px;
  z-index: 9999;
  pointer-events: none;
}
 
.deng-box3 {
  position: fixed;
  top: -40px;
  right: -50px;
  z-index: 9999;
  pointer-events: none;
}
.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;
  box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box2 .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;
  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;
  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(26, 0, 15, 0.1);
  margin: -2px 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: 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: lanterns, sans-serif;
  font-size: 3.2rem;/* 文字字号 */ 
  color: #dc8f03;
  font-weight: bold;
  line-height: 85px;
  text-align: center;
  margin-left: -4.5px;/* 调整文字到左边的距离,请根据实际调整 */
  margin-top: 4px;/* 调整文字到顶部的距离,请根据实际调整 */
}
 
.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)
  }
}
</style>
<!-- 灯笼专用字体(引入仅包含“新年快乐”的字符集) -->
<style>
@font-face {
    font-family: 'lanterns';
    src: url('https://source.loneapex.cn/lanterns.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

有设备检测(仅对电脑有效)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://loneapex.cn/extra-js/beauty/mobile-detect.js"></script>
<script type="text/javascript">
    window.onload = function() { //用onload让它全部加载完,要不会报错的≧﹏≦
        // 设备检测
        var md = new MobileDetect(window.navigator.userAgent);
        // PC生效,手机不生效
        //若想让手机、平板端都无效,请把下一行替换为这个:if(!md.phone() && !md.tablet()){
        if(!md.phone()){
        //由于mobile-detect.js仅支持js内容,这里把灯笼所有的HTML全转化为js变量,然后插入到body中
        //说实话,这样搞有点舍近求远了......
            var lanternsHTML = `
                <!-- 灯笼1-乐 -->
                <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>
                 
                <!-- 灯笼2-快 -->
                <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>
                 
                <!-- 灯笼3-节 -->
                <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>
                 
                <!-- 灯笼4-春 -->
                <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>
                 
                <style>
                .deng-box {
                  position: fixed;
                  top: -40px;
                  left: 55px;
                  z-index: 9999;
                  pointer-events: none;
                }
                 
                .deng-box1 {
                  position: fixed;
                  top: -30px;
                  left: -50px;
                  z-index: 9999;
                  pointer-events: none;
                }
                 
                .deng-box2 {
                  position: fixed;
                  top: -30px;
                  right: 55px;
                  z-index: 9999;
                  pointer-events: none;
                }
                 
                .deng-box3 {
                  position: fixed;
                  top: -40px;
                  right: -50px;
                  z-index: 9999;
                  pointer-events: none;
                }
                .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;
                  box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
                }
                .deng-box2 .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;
                  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;
                  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(26, 0, 15, 0.1);
                  margin: -2px 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: 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: lanterns, sans-serif;
                  font-size: 3.2rem;/* 文字字号 */ 
                  color: #dc8f03;
                  font-weight: bold;
                  line-height: 85px;
                  text-align: center;
                  margin-left: -4.5px;/* 调整文字到左边的距离,请根据实际调整 */
                  margin-top: 4px;/* 调整文字到顶部的距离,请根据实际调整 */
                }
                 
                .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)
                  }
                }
                </style>
                <!-- 灯笼专用字体 -->
                <style>
                @font-face {
                    font-family: 'lanterns';
                    src: url('https://source.loneapex.cn/lanterns.ttf') format('truetype');
                    font-weight: normal;
                    font-style: normal;
                }
                </style>
            `
            // 将上面灯笼的HTML添加到body
            document.body.insertAdjacentHTML('beforeend', lanternsHTML);
        }
    }
</script>

评论

  1. Windows Chrome
    2 周前
    2025-1-25 18:29:01

    有要过年的味道了!可惜日本已经不过春节了,春节照常上班

    • Mimosa233
      博主
      广树
      Windows Edge
      2 周前
      2025-1-25 18:37:11

      是呀
      (不过国内的年味越来越惨淡了,明明还有三天过大年,感觉却和平日里没什么区别。╮(╯▽╰)╭

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯
 ̄﹃ ̄
(/ω\)
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
(´っω・`。)
( ,,´・ω・)ノ)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•)
(ㆆᴗㆆ)
有希酱最可爱啦!(素材来自bilibili@最上川下山)
整活by Mimosa233
Source: github.com/k4yt3x/flowerhd
galgame系列表情by Mimosa233
颜文字
周防有希
小恐龙
夸夸我!
花!
可愛い!
上一篇
下一篇