🏮新年快乐 - 附赠超好看的自用灯笼代码一套

Author： Ivan Hanloth
发布时间：January 1, 2025
157 views
2 comments
19919 words
Categories：技术分享博文

新年快乐！🏮🏮

之前每年新年都只是发了一个简单的新年祝福，今年决定把珍藏的网站灯笼代码分享出来。具体效果见下图。

![Snipaste_2025-01-03_10-55-54.png](https://blog.ivan-hanloth.cn/usr/uploads/2025/01/569639368.png)

过年的时候我的博客也会挂上这个灯笼，也可以参考一下。

代码大部分来源互联网，但是找不到原作者了（非常抱歉🙏），博主对代码进行了一些简单的修改和优化。

**省流：直接看最后一个**

## 基础代码

首先需要引入灯笼的css代码

```css
.lanterns-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    pointer-events: none;
}

.lantern-container {
    width: 150px;
    height: 100px;
    position: relative;
    line-height: 0;
    -webkit-animation: lantern 5s infinite ease-in-out;
    animation: lantern 5s infinite ease-in-out;
    -webkit-transform-origin: 50% -100px;
    transform-origin: 50% -100px;
}

.lantern-center {
    position: relative;
    height: 100%;
    background-color: red;
    border-radius: 120px;
    -webkit-box-shadow: 0 0 80px -10px #f00;
    box-shadow: 0 0 80px -10px red;
}

.lantern-line {
    height: 100%;
    text-align: center;
}

.lantern-line:before,
.lantern-line:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border: 2px solid #ecaa2f;
    border-radius: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%);
}

.lantern-line:before {
    width: 75%;
    height: 100%;
}

.lantern-line:after {
    width: 35%;
    height: 100%;
}

.lantern-text-wrap {
    display: inline-block;
    vertical-align: top;
    height: 100%;
}

.lantern-text {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: #ecaa2f;
    writing-mode: vertical-lr;
    text-align: center;
    letter-spacing: 5px;
}

.lantern-top,
.lantern-bottom {
    width: 40%;
    height: 8px;
    background-color: #ecaa2f;
    position: relative;
    z-index: 1;
}

.lantern-top {
    margin: 0 auto -2px;
    border-radius: 5px 5px 0 0;
}

.lantern-bottom {
    margin: -2px auto 0;
    border-radius: 0 0 5px 5px;
}

.lantern-top-rope,
.lantern-bottom-rope {
    width: 4px;
    background-color: #ecaa2f;
    margin: 0 auto;
}

.lantern-top-rope {
    height: 40px;
}

.lantern-bottom-rope {
    position: relative;
    height: 20px;
    -webkit-animation: lantern 3s infinite ease-in-out;
    animation: lantern 3s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    transform-origin: 50% -45px;
}

.lantern-bottom-rope:after {
    content: "";
    position: absolute;
    top: 100%;
    left: -4px;
    width: 12px;
    height: 50px;
    background: linear-gradient(#f00, #e36d00 3px, #fbd342 5px, #e36d00 8px, #e36d00 12px, #f00 16px, rgba(255, 0, 0, 0.8) 26px, rgba(255, 0, 0, 0.6));
    border-radius: 5px 5px 0 0;
}

@-webkit-keyframes lantern {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

to {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}

@keyframes lantern {
    0% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

50% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

to {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}

@media screen and (max-width: 720px) {
    .lantern-container {
        width: 100px;
        height: 60px;
    }

.lantern-top-rope {
        width: 3px;
        height: 20px;
    }

.lantern-center {
        -webkit-box-shadow: 0 0 40px -10px #f00;
        box-shadow: 0 0 40px -10px red;
    }

.lantern-top,
    .lantern-bottom {
        width: 35%;
        height: 6px;
    }

.lantern-top {
        margin-bottom: -0.5px;
    }

.lantern-bottom {
        margin-top: -0.5px;
    }

.lantern-bottom-rope {
        width: 2px;
    }

.lantern-bottom-rope:after {
        left: -2px;
        width: 6px;
        height: 25px;
    }

.lantern-text {
        font-size: 14px;
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 420px) {
    .lantern-container {
        width: 80px;
        height: 50px;
    }

.lantern-top-rope {
        width: 3px;
        height: 20px;
    }

.lantern-center {
        -webkit-box-shadow: 0 0 40px -10px #f00;
        box-shadow: 0 0 40px -10px red;
    }

.lantern-top,
    .lantern-bottom {
        width: 35%;
        height: 4px;
    }

.lantern-top {
        margin-bottom: 0;
    }

.lantern-bottom {
        margin-top: 0;
    }

.lantern-bottom-rope {
        width: 2px;
    }

.lantern-bottom-rope:after {
        left: -2px;
        width: 6px;
        height: 25px;
    }

.lantern-text {
        font-size: 14px;
        letter-spacing: 2px;
    }

.lantern-line:before,
    .lantern-line:after {
        border-width: 1px;
    }
}
```

之后添加下面的js即可使用

```javascript
function onDocumentReady(callback) {
    document.readyState !== "loading" ? callback() : document.addEventListener("DOMContentLoaded", callback);
}
function createLanterns(lanternTexts) {
    const lanternsContainer = document.createElement("div");
    lanternsContainer.className = "lanterns-container";

lanternTexts.forEach((text) => {
        const lantern = document.createElement("div");
        lantern.innerHTML = `
      <div class="lantern-container">
        <div class="lantern-top-rope"></div>
        <div class="lantern-top"></div>
        <div class="lantern-center">
          <div class="lantern-line">
            <div class="lantern-text-wrap">
              <div class="lantern-text">${text}</div>
            </div>
          </div>
        </div>
        <div class="lantern-bottom"></div>
        <div class="lantern-bottom-rope"></div>
      </div>
    `;
        lanternsContainer.appendChild(lantern);
    });

document.body.appendChild(lanternsContainer);
}
onDocumentReady(() => createLanterns(["元旦", "快乐"]));
```

可以修改最后的数组来增加或减少灯笼的数量，每一个元素就是一个灯笼。灯笼会自动排布在网站顶部

## 懒人版代码

如果你和博主一样懒，不想每年手动添加和删除灯笼的代码，你可以使用下面这个js来使灯笼每年一月自动显示，不是一月则不显示。

```javascript
function onDocumentReady(callback) {
    document.readyState !== "loading" ? callback() : document.addEventListener("DOMContentLoaded", callback);
}

function createLanterns(lanternTexts) {
    const lanternsContainer = document.createElement("div");
    lanternsContainer.className = "lanterns-container";

document.body.appendChild(lanternsContainer);
}

// 检查当前月份是否为1月（月份值为0）
function isJanuary() {
    const currentDate = new Date();
    return currentDate.getMonth() === 0; // 0 表示1月
}

// 示例：传入灯笼的文字内容
onDocumentReady(() => {
    if (isJanuary()) {
        createLanterns(["元旦", "快乐", "新年", "吉祥"]);
    }
});
```

## 二合一版代码

当然，如果你和博主一样，已经懒到不想引入两个文件，也可以使用下面对的这一个二合一版代码，将会自动添加css样式和js

```javascript
(function () {
    // 嵌入样式
    const style = '.lanterns-container{display:flex;justify-content:space-around;align-items:flex-start;position:fixed;top:0;left:0;right:0;z-index:9999;pointer-events:none}.lantern-container{width:150px;height:100px;position:relative;line-height:0;-webkit-animation:lantern 5s infinite ease-in-out;animation:lantern 5s infinite ease-in-out;-webkit-transform-origin:50% -100px;transform-origin:50% -100px}.lantern-center{position:relative;height:100%;background-color:red;border-radius:120px;-webkit-box-shadow:0 0 80px -10px #f00;box-shadow:0 0 80px -10px red}.lantern-line{height:100%;text-align:center}.lantern-line:before,.lantern-line:after{content:"";position:absolute;top:0;left:50%;border:2px solid #ecaa2f;border-radius:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%)}.lantern-line:before{width:75%;height:100%}.lantern-line:after{width:35%;height:100%}.lantern-text-wrap{display:inline-block;vertical-align:top;height:100%}.lantern-text{height:100%;display:flex;justify-content:center;align-items:center;font-size:28px;font-weight:700;color:#ecaa2f;writing-mode:vertical-lr;text-align:center;letter-spacing:5px}.lantern-top,.lantern-bottom{width:40%;height:8px;background-color:#ecaa2f;position:relative;z-index:1}.lantern-top{margin:0 auto -2px;border-radius:5px 5px 0 0}.lantern-bottom{margin:-2px auto 0;border-radius:0 0 5px 5px}.lantern-top-rope,.lantern-bottom-rope{width:4px;background-color:#ecaa2f;margin:0 auto}.lantern-top-rope{height:40px}.lantern-bottom-rope{position:relative;height:20px;-webkit-animation:lantern 3s infinite ease-in-out;animation:lantern 3s infinite ease-in-out;-webkit-transform-origin:50% -45px;transform-origin:50% -45px}.lantern-bottom-rope:after{content:"";position:absolute;top:100%;left:-4px;width:12px;height:50px;background:linear-gradient(#f00,#e36d00 3px,#fbd342 5px,#e36d00 8px,#e36d00 12px,#f00 16px,rgba(255,0,0,0.8) 26px,rgba(255,0,0,0.6));border-radius:5px 5px 0 0}@-webkit-keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@media screen and (max-width:720px){.lantern-container{width:100px;height:60px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:6px}.lantern-top{margin-bottom:-0.5px}.lantern-bottom{margin-top:-0.5px}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}}@media screen and (max-width:420px){.lantern-container{width:80px;height:50px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:4px}.lantern-top{margin-bottom:0}.lantern-bottom{margin-top:0}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}.lantern-line:before,.lantern-line:after{border-width:1px}}';

// 创建样式标签并插入到文档头部
    const styleElement = document.createElement('style');
    styleElement.innerHTML = style;
    document.head.appendChild(styleElement);

// JavaScript 代码
    function onDocumentReady(callback) {
        document.readyState !== "loading" ? callback() : document.addEventListener("DOMContentLoaded", callback);
    }

function createLanterns(lanternTexts) {
        const lanternsContainer = document.createElement("div");
        lanternsContainer.className = "lanterns-container";

lanternTexts.forEach((text) => {
            const lantern = document.createElement("div");
            lantern.innerHTML = `
          <div class="lantern-container">
            <div class="lantern-top-rope"></div>
            <div class="lantern-top"></div>
            <div class="lantern-center">
              <div class="lantern-line">
                <div class="lantern-text-wrap">
                  <div class="lantern-text">${text}</div>
                </div>
              </div>
            </div>
            <div class="lantern-bottom"></div>
            <div class="lantern-bottom-rope"></div>
          </div>
        `;
            lanternsContainer.appendChild(lantern);
        });

document.body.appendChild(lanternsContainer);
    }

// 检查当前月份是否为1月（月份值为0）
function isJanuary() {
    const currentDate = new Date();
    return currentDate.getMonth() === 0; // 0 表示1月
}
onDocumentReady(() => {
    if (isJanuary()) {
        createLanterns(["元旦", "快乐", "新年", "吉祥"]);
    }
});
})();
```

## 压缩版二合一

当然，如果你和博主一样希望代码占用小一些，可以用终极版压缩代码：

手动控制版：

```javascript
(function(){let a='.lanterns-container{display:flex;justify-content:space-around;align-items:flex-start;position:fixed;top:0;left:0;right:0;z-index:9999;pointer-events:none}.lantern-container{width:150px;height:100px;position:relative;line-height:0;-webkit-animation:lantern 5s infinite ease-in-out;animation:lantern 5s infinite ease-in-out;-webkit-transform-origin:50% -100px;transform-origin:50% -100px}.lantern-center{position:relative;height:100%;background-color:red;border-radius:120px;-webkit-box-shadow:0 0 80px -10px #f00;box-shadow:0 0 80px -10px red}.lantern-line{height:100%;text-align:center}.lantern-line:before,.lantern-line:after{content:"";position:absolute;top:0;left:50%;border:2px solid #ecaa2f;border-radius:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%)}.lantern-line:before{width:75%;height:100%}.lantern-line:after{width:35%;height:100%}.lantern-text-wrap{display:inline-block;vertical-align:top;height:100%}.lantern-text{height:100%;display:flex;justify-content:center;align-items:center;font-size:28px;font-weight:700;color:#ecaa2f;writing-mode:vertical-lr;text-align:center;letter-spacing:5px}.lantern-top,.lantern-bottom{width:40%;height:8px;background-color:#ecaa2f;position:relative;z-index:1}.lantern-top{margin:0 auto -2px;border-radius:5px 5px 0 0}.lantern-bottom{margin:-2px auto 0;border-radius:0 0 5px 5px}.lantern-top-rope,.lantern-bottom-rope{width:4px;background-color:#ecaa2f;margin:0 auto}.lantern-top-rope{height:40px}.lantern-bottom-rope{position:relative;height:20px;-webkit-animation:lantern 3s infinite ease-in-out;animation:lantern 3s infinite ease-in-out;-webkit-transform-origin:50% -45px;transform-origin:50% -45px}.lantern-bottom-rope:after{content:"";position:absolute;top:100%;left:-4px;width:12px;height:50px;background:linear-gradient(#f00,#e36d00 3px,#fbd342 5px,#e36d00 8px,#e36d00 12px,#f00 16px,rgba(255,0,0,0.8) 26px,rgba(255,0,0,0.6));border-radius:5px 5px 0 0}@-webkit-keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@media screen and (max-width:720px){.lantern-container{width:100px;height:60px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:6px}.lantern-top{margin-bottom:-0.5px}.lantern-bottom{margin-top:-0.5px}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}}@media screen and (max-width:420px){.lantern-container{width:80px;height:50px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:4px}.lantern-top{margin-bottom:0}.lantern-bottom{margin-top:0}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}.lantern-line:before,.lantern-line:after{border-width:1px}}';let b=document.createElement('style');b.innerHTML=a;document.head.appendChild(b);function d(c){document.readyState!=="loading"?c():document.addEventListener("DOMContentLoaded",c)}function e(c){const g=document.createElement("div");g.className="lanterns-container";c.forEach((h)=>{const i=document.createElement("div");i.innerHTML=`<div class="lantern-container"><div class="lantern-top-rope"></div><div class="lantern-top"></div><div class="lantern-center"><div class="lantern-line"><div class="lantern-text-wrap"><div class="lantern-text">${h}</div></div></div></div><div class="lantern-bottom"></div><div class="lantern-bottom-rope"></div></div>`;g.appendChild(i)});document.body.appendChild(g)}d(()=>e(["元旦","快乐"]))})();
```

自动控制版：

```javascript
(function(){let a='.lanterns-container{display:flex;justify-content:space-around;align-items:flex-start;position:fixed;top:0;left:0;right:0;z-index:9999;pointer-events:none}.lantern-container{width:150px;height:100px;position:relative;line-height:0;-webkit-animation:lantern 5s infinite ease-in-out;animation:lantern 5s infinite ease-in-out;-webkit-transform-origin:50% -100px;transform-origin:50% -100px}.lantern-center{position:relative;height:100%;background-color:red;border-radius:120px;-webkit-box-shadow:0 0 80px -10px #f00;box-shadow:0 0 80px -10px red}.lantern-line{height:100%;text-align:center}.lantern-line:before,.lantern-line:after{content:"";position:absolute;top:0;left:50%;border:2px solid #ecaa2f;border-radius:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%)}.lantern-line:before{width:75%;height:100%}.lantern-line:after{width:35%;height:100%}.lantern-text-wrap{display:inline-block;vertical-align:top;height:100%}.lantern-text{height:100%;display:flex;justify-content:center;align-items:center;font-size:28px;font-weight:700;color:#ecaa2f;writing-mode:vertical-lr;text-align:center;letter-spacing:5px}.lantern-top,.lantern-bottom{width:40%;height:8px;background-color:#ecaa2f;position:relative;z-index:1}.lantern-top{margin:0 auto -2px;border-radius:5px 5px 0 0}.lantern-bottom{margin:-2px auto 0;border-radius:0 0 5px 5px}.lantern-top-rope,.lantern-bottom-rope{width:4px;background-color:#ecaa2f;margin:0 auto}.lantern-top-rope{height:40px}.lantern-bottom-rope{position:relative;height:20px;-webkit-animation:lantern 3s infinite ease-in-out;animation:lantern 3s infinite ease-in-out;-webkit-transform-origin:50% -45px;transform-origin:50% -45px}.lantern-bottom-rope:after{content:"";position:absolute;top:100%;left:-4px;width:12px;height:50px;background:linear-gradient(#f00,#e36d00 3px,#fbd342 5px,#e36d00 8px,#e36d00 12px,#f00 16px,rgba(255,0,0,0.8) 26px,rgba(255,0,0,0.6));border-radius:5px 5px 0 0}@-webkit-keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@keyframes lantern{0%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}to{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}}@media screen and (max-width:720px){.lantern-container{width:100px;height:60px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:6px}.lantern-top{margin-bottom:-0.5px}.lantern-bottom{margin-top:-0.5px}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}}@media screen and (max-width:420px){.lantern-container{width:80px;height:50px}.lantern-top-rope{width:3px;height:20px}.lantern-center{-webkit-box-shadow:0 0 40px -10px #f00;box-shadow:0 0 40px -10px red}.lantern-top,.lantern-bottom{width:35%;height:4px}.lantern-top{margin-bottom:0}.lantern-bottom{margin-top:0}.lantern-bottom-rope{width:2px}.lantern-bottom-rope:after{left:-2px;width:6px;height:25px}.lantern-text{font-size:14px;letter-spacing:2px}.lantern-line:before,.lantern-line:after{border-width:1px}}';const b=document.createElement('style');b.innerHTML=a;document.head.appendChild(b);function d(c){document.readyState!=="loading"?c():document.addEventListener("DOMContentLoaded",c)}function e(c){const g=document.createElement("div");g.className="lanterns-container";c.forEach((h)=>{const i=document.createElement("div");i.innerHTML=`<div class="lantern-container"><div class="lantern-top-rope"></div><div class="lantern-top"></div><div class="lantern-center"><div class="lantern-line"><div class="lantern-text-wrap"><div class="lantern-text">${h}</div></div></div></div><div class="lantern-bottom"></div><div class="lantern-bottom-rope"></div></div>`;g.appendChild(i)});document.body.appendChild(g)}d(()=>{if(new Date().getMonth()===0){e(["新年","快乐"])}})})();
```

## 白嫖版

直接在网站`</body>`标签前插入以下html代码即可:

```html
<script src="https://blog.ivan-hanloth.cn/static/lantern.js" async data-lantern="元旦|快乐" data-auto></script>
```

提供以下几个属性选项：

`data-lantern`：设置灯笼的文字，多个文字使用管道符`|`进行分隔，未提供则默认为“新年|快乐”

`data-auto`：设置一月自动显示，只要存在此属性，就会启用自动控制

好啦，新年水的第一篇博客就到这里

Last modification：January 5, 2025

如果觉得我的文章对你有用，请随意赞赏

2 comments

小有名气的女孩
January 3rd, 2025 at 11:08 am

嫖

Reply
看透一切的女孩
January 3rd, 2025 at 11:01 am

白嫖白嫖

Reply

🏮新年快乐 - 附赠超好看的自用灯笼代码一套

Ivan Hanloth • 2025 年 01 月 01 日