今天是农历腊月18，距离小年23还有5天，距离春节还有12天，给网站上加俩红灯笼🏮，增添一下气氛。

普通版

这个版本的是从网上教程里找到的，效果如下：

完整denglong.js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
function createDengContainer() {
    const container = document.createElement('div');
    container.className = 'deng-container';

    // 从当前脚本的 URL 获取参数
    const scriptSrc = document.currentScript.src;
    const urlParams = new URLSearchParams(scriptSrc.split('?')[1]); // 获取 '?'
    const customText = urlParams.get('text'); // 获取参数名为'text'的值

    // 将获取的文本分割为字符数组，如果没有提供文本，则使用默认的“新年快乐”
    const texts = customText ? customText.split('') : ['新', '年', '快', '乐'];

    texts.forEach((text, index) => {
        const box = document.createElement('div');
        box.className = `deng-box deng-box${index + 1}`;

        const deng = document.createElement('div');
        deng.className = 'deng';

        const xian = document.createElement('div');
        xian.className = 'xian';

        const dengA = document.createElement('div');
        dengA.className = 'deng-a';

        const dengB = document.createElement('div');
        dengB.className = 'deng-b';

        const dengT = document.createElement('div');
        dengT.className = 'deng-t';
        dengT.textContent = text;

        dengB.appendChild(dengT);
        dengA.appendChild(dengB);
        deng.appendChild(xian);
        deng.appendChild(dengA);

        const shuiA = document.createElement('div');
        shuiA.className = 'shui shui-a';

        const shuiC = document.createElement('div');
        shuiC.className = 'shui-c';
        const shuiB = document.createElement('div');
        shuiB.className = 'shui-b';

        shuiA.appendChild(shuiC);
        shuiA.appendChild(shuiB);
        deng.appendChild(shuiA);
        box.appendChild(deng);
        container.appendChild(box);
    });

    document.body.appendChild(container);
}

// 添加CSS样式
function addStyles() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `
        .deng-container {
            position: relative;
            overflow: hidden;
            top: 10px;
            opacity: 0.9;
            z-index: 9999;
            pointer-events: none;
        }
        .deng-box {
            position: fixed;
            right: 10px;
            top: 12px;
        }
        .deng-box1 { position: fixed; top: 15px; left: 20px; }
        .deng-box2 { position: fixed; top: 12px; left: 130px; }
        .deng-box3 { position: fixed; top: 10px; right: 120px; }
        .deng {
            position: relative;
            width: 120px;
            height: 90px;
            background: rgba(216, 0, 15, .8);
            border-radius: 50% 50%;
            animation: swing 3s infinite ease-in-out;
            box-shadow: -5px 5px 50px 4px #fa6c00;
        }
        .deng-a { 
            width: 100px; 
            height: 90px; 
            background: rgba(216, 0, 15, .1); 
            border-radius: 50%;  
            border: 2px solid #dc8f03; 
            margin-left: 7px; 
            display: flex; 
            justify-content: center; 
        }
        .deng-b { 
            width: 65px; 
            height: 83px; 
            background: rgba(216, 0, 15, .1); 
            border-radius: 60%; 
            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; 
            animation: swing 4s infinite ease-in-out; 
            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, .deng:after { 
            content: " "; 
            display: block; 
            position: absolute; 
            border-radius: 5px; 
            border: solid 1px #dc8f03; 
            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03); 
        }
        .deng:before { 
            top: -7px; left: 29px; height: 12px; width: 60px; z-index: 999; 
        }
        .deng:after { 
            bottom: -7px; left: 10px; height: 12px; width: 60px; margin-left: 20px; 
        }
        .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; 
        }
        @media (max-width: 768px) { 
            .deng-t { font-size: 2.5rem; }  
            .deng-box1,.deng-box2{ transform: scale(0.5); transform-origin: left top  ;  }  
             .deng-box3,.deng-box4 { transform: scale(0.5); transform-origin: right top  ;  }  
         
        .deng-box1 { position: fixed; top: 8px; left: 5px; }
        .deng-box2 { position: fixed; top: 8px; left: 60px; }
        .deng-box3 { position: fixed; top: 8px; right: 60px; }
        .deng-box4 { position: fixed; top: 8px; right: 5px; }
        }
        @keyframes swing { 
            0% { transform: rotate(-10deg); }  
            50% { transform: rotate(10deg); }  
            100% { transform: rotate(-10deg); }  
        }
    `;
    document.head.appendChild(style);
}

// 引入时调用
function init() {
    addStyles();
    createDengContainer();
}

// 调用初始化函数
init();

3D改进版

这个版本是我在普通版基础上做的改动，结合了3D效果，并优化了一下细节，效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
function createDengContainer() {
    const container = document.createElement('div');
    container.className = 'deng-container';

    const scriptSrc = document.currentScript ? document.currentScript.src : '';
    const urlParams = new URLSearchParams(scriptSrc.split('?')[1]);
    const customText = urlParams.get('text');
    const texts = customText ? customText.split('') : ['新', '年', '快', '乐'];

    texts.forEach((text, index) => {
        const box = document.createElement('div');
        box.className = `deng-box deng-box${index + 1}`;

        // 3D 容器 (负责摆动)
        const lantern3D = document.createElement('div');
        lantern3D.className = 'lantern-3d';

        // 吊线
        const xian = document.createElement('div');
        xian.className = 'xian';

        // --- 【核心修改 2】开始：创建简单的盖子 ---
        // 不再需要复杂的层叠结构，回归最简单的单层 div
        const capTop = document.createElement('div');
        capTop.className = 'lantern-cap-top';
        // 添加提环
        const capLoop = document.createElement('div');
        capLoop.className = 'cap-loop';
        capTop.appendChild(capLoop);

        const capBottom = document.createElement('div');
        capBottom.className = 'lantern-cap-bottom';
        // --- 【核心修改 2】结束 ---


        // 灯笼主体 (负责自转)
        const lanternBody = document.createElement('div');
        lanternBody.className = 'lantern-body';

        // 内部光源
        const lanternLight = document.createElement('div');
        lanternLight.className = 'lantern-light';
        lanternBody.appendChild(lanternLight);

        // 创建瓣片
        for (let i = 0; i < 10; i++) {
            const rib = document.createElement('div');
            rib.className = 'rib';
            rib.style.transform = `rotateY(${i * 36}deg)`; 
            lanternBody.appendChild(rib);
        }

        // 文字
        const textDeng = document.createElement('div');
        textDeng.className = 'deng-t';
        textDeng.textContent = text;

        // 吊尾
        const tassel = document.createElement('div');
        tassel.className = 'tassel-total';
        // --- 【核心修改 1】开始：中国结改回平面结构 ---
        tassel.innerHTML = `
            <div class="tassel-bead"></div> 
            <div class="tassel-knot-flat"></div> <div class="tassel-threads"></div>
        `;
        // --- 【核心修改 1】结束 ---
        
        // --- 组装 ---
        lantern3D.appendChild(xian);
        
        // 【关键一步】：把盖子加到 lantern3D，而不是 lanternBody
        // 这样它们就不会跟着主体自转了！
        lantern3D.appendChild(capTop);
        lantern3D.appendChild(capBottom);
        
        lantern3D.appendChild(lanternBody); // 主体在盖子后面转
        lantern3D.appendChild(textDeng);
        lantern3D.appendChild(tassel);
        box.appendChild(lantern3D);
        container.appendChild(box);
    });

    document.body.appendChild(container);
}

function addStyles() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `
        .deng-container {
            position: fixed; top: 40px; left: 0; width: 100%; height: 0;
            z-index: 99999; pointer-events: none; perspective: 800px;
        }
        .deng-box { position: fixed; z-index: 999; }
        .deng-box1 { left: 40px; top: -10px; animation-delay: 0s; }
        .deng-box2 { left: 180px; top: 30px; animation-delay: 0.5s; }
        .deng-box3 { right: 180px; top: 30px; animation-delay: 1s; }
        .deng-box4 { right: 40px; top: -10px; animation-delay: 1.5s; }

        .xian {
            position: absolute; left: 60px; width: 3px; background: #ffca28;
            height: 1000px; top: -1000px; box-shadow: 0 0 5px rgba(255, 202, 40, 0.6); z-index: 1;
        }

        /* 容器负责整体摆动 */
        .lantern-3d {
            position: relative; width: 120px; height: 100px;
            transform-style: preserve-3d; transform-origin: 50% 0;
            animation: swingNatural 5s infinite ease-in-out;
        }

        /* 主体负责自转 */
        .lantern-body {
            position: absolute; width: 100%; height: 100%;
            transform-style: preserve-3d; animation: rotateBody 18s infinite linear;
            z-index: 5; /* 确保在盖子下面一点 */
        }

        .rib {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            border-radius: 50%; border: 1px solid rgba(255, 202, 40, 0.6); box-sizing: border-box;
            background: radial-gradient(circle at 50% 50%, rgba(216,0,15,0) 20%, rgba(216,0,15,0.7) 60%, rgba(216,0,15,0.95) 100%);
            backface-visibility: visible;
        }

        /* --- 【核心修改 2】CSS：简化的、不旋转的盖子 --- */
        .lantern-cap-top, .lantern-cap-bottom {
            position: absolute; left: 35px; width: 50px; height: 12px;
            /* 使用明亮的金色渐变，看起来像金属 */
            background: linear-gradient(to bottom, #ffd700, #ffca28, #b8860b);
            border: 1px solid #ffca28; border-radius: 4px; 
            z-index: 20; /* 确保盖在旋转体上面 */
            /* 增加一点投影，制造悬浮在表面的立体感 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.4);
        }
        .lantern-cap-top { top: -6px; border-bottom: none; }
        .lantern-cap-bottom { bottom: -6px; border-top: none; }

        /* 提环 */
        .cap-loop {
            position: absolute; left: 18px; top: -8px; width: 14px; height: 8px;
            border: 2px solid #ffca28; border-bottom: none; border-radius: 10px 10px 0 0;
        }
        /* --- 【核心修改 2】结束 --- */


        .lantern-light {
            position: absolute; width: 60px; height: 60px; top: 20px; left: 30px;
            background: #ffeb3b; border-radius: 50%; filter: blur(18px); opacity: 0.9;
            animation: flicker 3s infinite ease-in-out;
        }

        .deng-t {
            position: absolute; width: 100%; height: 100%;
            display: flex; justify-content: center; align-items: center;
            font-size: 3rem; color: #ffca28; font-weight: 700; font-family: "华文行楷", "KaiTi", serif;
            text-shadow: 0 0 5px #ff6a00, 0 0 20px #ff0000;
            transform: translateZ(62px); backface-visibility: hidden; -webkit-font-smoothing: antialiased;
            z-index: 30;
        }

        .tassel-total {
            position: absolute; top: 100px; left: 60px; width: 0; height: auto;
            transform-style: preserve-3d; animation: tasselSwing 5s infinite ease-in-out; animation-delay: 0.5s;
        }

        .tassel-bead {
            position: absolute; left: -6px; top: 5px; width: 12px; height: 12px;
            background: radial-gradient(circle at 30% 30%, #fff, #ef5350);
            border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); z-index: 5;
        }

        /* --- 【核心修改 1】CSS：改回扁平的中国结 --- */
        .tassel-knot-flat {
            position: absolute; left: -8px; top: 18px; width: 16px; height: 16px;
            background: #d8000f; /* 纯色背景 */
            border: 1px solid #ffca28;
            transform: rotate(45deg); /* 旋转成菱形 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 4;
            /* 移除圆角和球体渐变 */
        }
        /* --- 【核心修改 1】结束 --- */

        .tassel-threads {
            position: absolute; left: -7px; top: 32px;
            width: 14px; height: 70px;
            background: repeating-linear-gradient(90deg, #d8000f, #d8000f 2px, #ff5252 2.5px, #d8000f 3px);
            border-radius: 2px 2px 5px 5px;
            mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        }

        @keyframes flicker {
            0%, 100% { opacity: 0.8; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }
        @keyframes swingNatural {
            0% { transform: rotateX(-4deg) rotateZ(-2deg); }
            25% { transform: rotateX(2deg) rotateZ(3deg); }
            50% { transform: rotateX(4deg) rotateZ(2deg); }
            75% { transform: rotateX(-2deg) rotateZ(-3deg); }
            100% { transform: rotateX(-4deg) rotateZ(-2deg); }
        }
        @keyframes tasselSwing {
            0% { transform: rotateX(-5deg) rotateZ(-5deg); }
            50% { transform: rotateX(5deg) rotateZ(5deg); }
            100% { transform: rotateX(-5deg) rotateZ(-5deg); }
        }
        @keyframes rotateBody {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }
        @media (max-width: 768px) {
            .deng-box { transform: scale(0.6); }
            .deng-box1 { left: 10px; } .deng-box2 { left: 80px; }
            .deng-box3 { right: 80px; } .deng-box4 { right: 10px; }
        }
    `;
    document.head.appendChild(style);
}

function init() {
    addStyles();
    createDengContainer();
}
init();

引用方式

1、新建一个denglong.js文件放在你的网站的资源目录下。

2、在网站首页的</body>前引用，比如：

1
<script src="https://www.example.com/denglong.js?text=春节快乐"> </script>

3、handsome主题直接放在自定义尾部即可

4、text=春节快乐，text后面的四个字即显示在四个灯笼里面的字，默认是“新年快乐”

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~