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

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

普通版

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

完整denglong.js代码：

javascript

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效果，并优化了一下细节，效果如下：

javascript

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>前引用，比如：

javascript

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

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

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