动态节日灯笼特效JavaScript脚本

// 奥德彪学习网 www.aode8.com All Rights Reserved.
(function() {
    // 封装灯笼创建函数，减少重复代码
    function createLantern(options) {
        const { id, boxClass, text, top, right, swingDuration } = options;
        
        // 创建灯笼容器
        const lanternBox = document.createElement('div');
        lanternBox.className = `deng-box ${boxClass}`;
        lanternBox.id = id;
        lanternBox.style.top = top;
        lanternBox.style.right = right;

        // 创建灯笼主体
        const deng = document.createElement('div');
        deng.className = 'deng';
        deng.style.animation = `swing ${swingDuration}s infinite ease-in-out`;

        // 灯笼悬挂线
        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);

        // 灯笼穗
        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(xian);
        deng.appendChild(dengA);
        deng.appendChild(shuiA);
        lanternBox.appendChild(deng);

        return lanternBox;
    }

    // 创建两个灯笼（通过参数配置差异）
    const lantern1 = createLantern({
        id: 'denglong1',
        boxClass: 'pos-1',
        text: '旦',
        top: '-40px',
        right: '5%',
        swingDuration: 3
    });

    const lantern2 = createLantern({
        id: 'denglong2',
        boxClass: 'pos-2',
        text: '元',
        top: '-30px',
        right: '20%',
        swingDuration: 5
    });

    // 添加到页面
    document.body.appendChild(lantern1);
    document.body.appendChild(lantern2);

    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
        /* 基础灯笼容器样式 */
        .deng-box {
            position: fixed;
            z-index: 1999;
        }

        /* 不同位置的定位（响应式） */
        .deng-box.pos-1 {
            right: 5%;
        }
        .deng-box.pos-2 {
            right: 20%;
        }

        /* 灯笼主体样式 */
        .deng {
            position: relative;
            width: 120px;
            height: 90px;
            margin: 50px;
            background: rgba(216, 0, 15, 0.8);
            border-radius: 50% 50%;
            transform-origin: 50% -100px;
            box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
        }

        /* 第一个灯笼特殊阴影 */
        .pos-1 .deng {
            box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
        }

        .deng-a {
            width: 100px;
            height: 90px;
            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: rgba(216, 0, 15, 0.1);
            margin: -4px 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;
            animation: swing 4s infinite ease-in-out;
            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: 1999;
            border-radius: 5px 5px 0 0;
            border: solid 1px #dc8f03;
            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: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
        }

        .deng-t {
            font-family: LXGW Wenkai Screen,Arial,Lucida Grande,Tahoma,sans-serif;
            font-size: 2.5rem;
            color: #dc8f03;
            font-weight: bold;
            line-height: 90px;
            text-align: center;
            pointer-events: none;
        }

        .night .deng-t, 
        .night .deng-box {
            background: transparent!important;
        }

        /* 简化动画（仅保留标准语法） */
        @keyframes swing { 
            0% { transform: rotate(-10deg) } 
            50% { transform: rotate(10deg) } 
            100% { transform: rotate(-10deg) } 
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .deng {
                width: 80px;
                height: 60px;
                margin: 20px; 
                transform-origin: 50% -70px; /* 调整旋转原点，适应小尺寸 */
            }
            
            /* 调整灯笼内框尺寸 */
            .deng-a {
                width: 65px;
                height: 55px;
                margin: 8px 6px 6px 7px;
            }
            
            .deng-b {
                width: 30px;
                height: 55px;
                margin: -3px 6px 6px 18px;
            }
            
            /* 调整灯笼顶部和底部装饰 */
            .deng:before {
                left: 19px;
                width: 40px;
            }
            
            .deng:after {
                left: 7px;
                width: 40px;
                margin-left: 13px;
            }
            
            /* 调整悬挂线位置 */
            .xian {
                left: 40px;
            }
            
            /* 调整灯笼穗位置和大小 */
            .shui-a {
                margin: -5px 0 0 39px;
            }
            
            .deng-t {
                font-size: 1.8rem;
                line-height: 60px;
            }
            
            /* 调整位置百分比，适应小屏幕 */
            .deng-box.pos-1 {
                right: 2%;
            }
            .deng-box.pos-2 {
                right: 30%;
            }
        }
    `;
    document.head.appendChild(style);

    // 提供移除灯笼的方法
    window.removeLanterns = function() {
        const lantern1 = document.getElementById('denglong1');
        const lantern2 = document.getElementById('denglong2');
        if (lantern1) lantern1.remove();
        if (lantern2) lantern2.remove();
    };
})();

一、：新建 denglong.php 文件，复制源代码保存

二、：在</body>之前引入：

<script src="https://example.com/denglong.php"></script><!--修改为自己的域名-->