记得之前在别的网站上看到这个喜庆的春节灯笼效果，觉得非常吸引人。虽然网上有一些现成的API可以直接实现，比如这个春节灯笼API，但使用后我发现两个问题：一是手机端访问时灯笼没有自适应，二是灯笼上的“春节快乐”四个字不能自定义。
为了解决这些问题，我找到了这篇文章，并“借鉴”了其中的源代码，稍加修改后转换成JavaScript方式引入使用。下面有完整的JS代码。
原文可查看效果：张苹果博客灯笼效果
一，引入使用
距离春节还有不到90天，赶紧试试吧！将以下JS在您的页面直接引入即可。
<!-- 将以下js放入您的页面即可。text为灯笼文字，默认：新年快乐 --><script src="https://www.vae.zhangweicheng.xyz/web/denglong.js?text=好好学习"> </script>
二，完整JS代码
// 张苹果博客：https://zhangpingguo.com/// 创建并添加元素
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;top: 10px;opacity: 0.9;z-index: 9999;pointer-events: none;}.deng-box {position: fixed;right: 10px;}.deng-box1 { position: fixed; top: 15px; left: 20px; }.deng-box2 { position: fixed; top: 12px; left: 130px; }.deng-box3 { position: fixed; top: 10px; right: 110px; }.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-box { transform: scale(0.5); top: -15px; } .deng-box1 { left: -22%; } .deng-box2 { left: 0px; } .deng-box3 { right: 50px; } .deng-box4 { right: -10px; } }@keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } }`;document.head.appendChild(style);
}// 引入时调用
function init() {addStyles();createDengContainer();
}// 调用初始化函数
init();
三，页面使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>春节灯笼</title>
</head>
<body><!-- 引入js即可，text为灯笼文字，默认：新年快乐 --><script src="./denglong.js?text=等着下班"> </script></body></html>
四，效果图
