春节到了，给typecho博客网站添加两对3D红灯笼

1
function createDengContainer() {
2
    const container = document.createElement('div');
3
    container.className = 'deng-container';
4

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

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

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

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

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

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

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

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

33
        dengB.appendChild(dengT);
34
        dengA.appendChild(dengB);
35
        deng.appendChild(xian);
36
        deng.appendChild(dengA);
37

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

41
        const shuiC = document.createElement('div');
42
        shuiC.className = 'shui-c';
43
        const shuiB = document.createElement('div');
44
        shuiB.className = 'shui-b';
45

46
        shuiA.appendChild(shuiC);
47
        shuiA.appendChild(shuiB);
48
        deng.appendChild(shuiA);
49
        box.appendChild(deng);
50
        container.appendChild(box);
51
    });
52

53
    document.body.appendChild(container);
54
}
55

56
// 添加CSS样式
57
function addStyles() {
58
    const style = document.createElement('style');
59
    style.type = 'text/css';
60
    style.textContent = `
61
        .deng-container {
62
            position: relative;
63
            overflow: hidden;
64
            top: 10px;
65
            opacity: 0.9;
66
            z-index: 9999;
67
            pointer-events: none;
68
        }
69
        .deng-box {
70
            position: fixed;
71
            right: 10px;
72
            top: 12px;
73
        }
74
        .deng-box1 { position: fixed; top: 15px; left: 20px; }
75
        .deng-box2 { position: fixed; top: 12px; left: 130px; }
76
        .deng-box3 { position: fixed; top: 10px; right: 120px; }
77
        .deng {
78
            position: relative;
79
            width: 120px;
80
            height: 90px;
81
            background: rgba(216, 0, 15, .8);
82
            border-radius: 50% 50%;
83
            animation: swing 3s infinite ease-in-out;
84
            box-shadow: -5px 5px 50px 4px #fa6c00;
85
        }
86
        .deng-a {
87
            width: 100px;
88
            height: 90px;
89
            background: rgba(216, 0, 15, .1);
90
            border-radius: 50%;
91
            border: 2px solid #dc8f03;
92
            margin-left: 7px;
93
            display: flex;
94
            justify-content: center;
95
        }
96
        .deng-b {
97
            width: 65px;
98
            height: 83px;
99
            background: rgba(216, 0, 15, .1);
100
            border-radius: 60%;
101
            border: 2px solid #dc8f03;
102
        }
103
        .xian {
104
            position: absolute;
105
            top: -20px;
106
            left: 60px;
107
            width: 2px;
108
            height: 20px;
109
            background: #dc8f03;
110
        }
111
        .shui-a {
112
            position: relative;
113
            width: 5px;
114
            height: 20px;
115
            margin: -5px 0 0 59px;
116
            animation: swing 4s infinite ease-in-out;
117
            transform-origin: 50% -45px;
118
            background: orange;
119
            border-radius: 0 0 5px 5px;
120
        }
121
        .shui-b {
122
            position: absolute;
123
            top: 14px;
124
            left: -2px;
125
            width: 10px;
126
            height: 10px;
127
            background: #dc8f03;
128
            border-radius: 50%;
129
        }
130
        .shui-c {
131
            position: absolute;
132
            top: 18px;
133
            left: -2px;
134
            width: 10px;
135
            height: 35px;
136
            background: orange;
137
            border-radius: 0 0 0 5px;
138
        }
139
        .deng:before, .deng:after {
140
            content: " ";
141
            display: block;
142
            position: absolute;
143
            border-radius: 5px;
144
            border: solid 1px #dc8f03;
145
            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
146
        }
147
        .deng:before {
148
            top: -7px; left: 29px; height: 12px; width: 60px; z-index: 999;
149
        }
150
        .deng:after {
151
            bottom: -7px; left: 10px; height: 12px; width: 60px; margin-left: 20px;
152
        }
153
        .deng-t {
154
            font-family: '华文行楷', Arial, Lucida Grande, Tahoma, sans-serif;
155
            font-size: 3.2rem;
156
            color: #dc8f03;
157
            font-weight: 700;
158
            line-height: 85px;
159
            text-align: center;
160
        }
161
        @media (max-width: 768px) {
162
            .deng-t { font-size: 2.5rem; }
163
            .deng-box1,.deng-box2{ transform: scale(0.5); transform-origin: left top  ;  }
164
             .deng-box3,.deng-box4 { transform: scale(0.5); transform-origin: right top  ;  }
165

166
        .deng-box1 { position: fixed; top: 8px; left: 5px; }
167
        .deng-box2 { position: fixed; top: 8px; left: 60px; }
168
        .deng-box3 { position: fixed; top: 8px; right: 60px; }
169
        .deng-box4 { position: fixed; top: 8px; right: 5px; }
170
        }
171
        @keyframes swing {
172
            0% { transform: rotate(-10deg); }
173
            50% { transform: rotate(10deg); }
174
            100% { transform: rotate(-10deg); }
175
        }
176
    `;
177
    document.head.appendChild(style);
178
}
179

180
// 引入时调用
181
function init() {
182
    addStyles();
183
    createDengContainer();
184
}
185

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

1
function createDengContainer() {
2
    const container = document.createElement('div');
3
    container.className = 'deng-container';
4

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

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

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

18
        // 吊线
19
        const xian = document.createElement('div');
20
        xian.className = 'xian';
21

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

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

35

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

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

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

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

58
        // 吊尾
59
        const tassel = document.createElement('div');
60
        tassel.className = 'tassel-total';
61
        // --- 【核心修改 1】开始：中国结改回平面结构 ---
62
        tassel.innerHTML = `
63
            <div class="tassel-bead"></div>
64
            <div class="tassel-knot-flat"></div> <div class="tassel-threads"></div>
65
        `;
66
        // --- 【核心修改 1】结束 ---
67

68
        // --- 组装 ---
69
        lantern3D.appendChild(xian);
70

71
        // 【关键一步】：把盖子加到 lantern3D，而不是 lanternBody
72
        // 这样它们就不会跟着主体自转了！
73
        lantern3D.appendChild(capTop);
74
        lantern3D.appendChild(capBottom);
75

76
        lantern3D.appendChild(lanternBody); // 主体在盖子后面转
77
        lantern3D.appendChild(textDeng);
78
        lantern3D.appendChild(tassel);
79
        box.appendChild(lantern3D);
80
        container.appendChild(box);
81
    });
82

83
    document.body.appendChild(container);
84
}
85

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

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

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

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

119
        .rib {
120
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
121
            border-radius: 50%; border: 1px solid rgba(255, 202, 40, 0.6); box-sizing: border-box;
122
            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%);
123
            backface-visibility: visible;
124
        }
125

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

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

146

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

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

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

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

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

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

194
        @keyframes flicker {
195
            0%, 100% { opacity: 0.8; transform: scale(1); }
196
            50% { opacity: 1; transform: scale(1.05); }
197
        }
198
        @keyframes swingNatural {
199
            0% { transform: rotateX(-4deg) rotateZ(-2deg); }
200
            25% { transform: rotateX(2deg) rotateZ(3deg); }
201
            50% { transform: rotateX(4deg) rotateZ(2deg); }
202
            75% { transform: rotateX(-2deg) rotateZ(-3deg); }
203
            100% { transform: rotateX(-4deg) rotateZ(-2deg); }
204
        }
205
        @keyframes tasselSwing {
206
            0% { transform: rotateX(-5deg) rotateZ(-5deg); }
207
            50% { transform: rotateX(5deg) rotateZ(5deg); }
208
            100% { transform: rotateX(-5deg) rotateZ(-5deg); }
209
        }
210
        @keyframes rotateBody {
211
            from { transform: rotateY(0deg); }
212
            to { transform: rotateY(360deg); }
213
        }
214
        @media (max-width: 768px) {
215
            .deng-box { transform: scale(0.6); }
216
            .deng-box1 { left: 10px; } .deng-box2 { left: 80px; }
217
            .deng-box3 { right: 80px; } .deng-box4 { right: 10px; }
218
        }
219
    `;
220
    document.head.appendChild(style);
221
}
222

223
function init() {
224
    addStyles();
225
    createDengContainer();
226
}
227
init();