春节灯笼特效，在网站页面实现灯笼效果，有2x2 灯笼布局：单个灯笼独立晃动和4x4 布局：同侧 4 个灯笼同步晃动。
核心特效：呼吸灯、随机摆动、hover 交互，全方位提升灯笼的视觉效果；
特效兼容：所有新增特效都适配2x2/4x4 布局，且支持自定义文字功能；
可定制性：每个特效的速度、样式都可通过修改 CSS 动画参数调整，满足不同视觉需求。
图片背景来源于网络，如有侵权请联系删除。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节灯笼特效（中国结吊坠版）</title>
<style>
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%%;
height: 100%%;
overflow: hidden; /* 隐藏滚动条 */
}
/* 全屏背景图 */
.bg-container {
position: fixed;
top: 0;
left: 0;
width: 100%%;
height: 100%%;
z-index: 1;
background: url("img/wall.wojc.cn-desk54229000.jpg") no-repeat center center; /* 替换为你的背景图链接 */
background-size: cover;
}
/* 控制面板（悬浮显示） */
.control-panel {
position: fixed;
top: 20px;
left: 50%%;
transform: translateX(-50%%);
z-index: 99999;
background: rgba(0,0,0,0.5);
padding: 10px 20px;
border-radius: 30px;
display: flex;
gap: 15px;
opacity: 0.3;
transition: opacity 0.3s;
}
.control-panel:hover {
opacity: 1;
}
.control-panel input, .control-panel button {
padding: 8px 15px;
border: none;
border-radius: 5px;
font-size: 14px;
outline: none;
}
.control-panel input {
width: 200px;
color: #333;
}
.control-panel button {
background: #dc8f03;
color: white;
cursor: pointer;
transition: background 0.2s;
}
.control-panel button:hover {
background: #fa6c00;
}
</style>
</head>
<body>
<!-- 全屏背景 -->
<div></div>
<!-- 控制面板 -->
<div>
<input type="text" id="lanternText" placeholder="输入4/8个自定义文字（如：新年快乐/恭喜发财万事如意）">
<button id="layout1Btn">左右各2个（并排）</button>
<button id="layout2Btn">左右各4个（竖排）</button>
<button id="applyTextBtn">应用文字</button>
</div>
<script>
// 全局变量
let currentLayout = '2x2'; // 默认2个并排
let currentText = ['新', '年', '快', '乐'];
// 创建灯笼容器
function createDengContainer() {
// 移除旧灯笼
const oldContainer = document.querySelector('.deng-container');
if (oldContainer) oldContainer.remove();
const container = document.createElement('div');
container.className = 'deng-container';
container.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%%;
height: 100%%;
pointer-events: none;
z-index: 9999;
top: 20px;
left: 0;
`;
// 文字适配
const texts = currentText.length === (currentLayout === '2x2' ? 4 : 8)
? currentText
: (currentLayout === '2x2' ? ['新', '年', '快', '乐'] : ['恭', '喜', '发', '财', '万', '事', '如', '意']);
// 灯笼定位 - 置顶布局
const positions = currentLayout === '2x2' ? [
{ top: '0', left: '10%%', translateY: '20px' },
{ top: '0', left: '20%%', translateY: '20px' },
{ top: '0', right: '20%%', translateY: '20px' },
{ top: '0', right: '10%%', translateY: '20px' }
] : [
{ top: '0', left: '15%%', translateY: '10px' },
{ top: '0', left: '15%%', translateY: '100px' },
{ top: '0', left: '15%%', translateY: '190px' },
{ top: '0', left: '15%%', translateY: '280px' },
{ top: '0', right: '15%%', translateY: '10px' },
{ top: '0', right: '15%%', translateY: '100px' },
{ top: '0', right: '15%%', translateY: '190px' },
{ top: '0', right: '15%%', translateY: '280px' }
];
// 2x2布局：单个独立晃动
if (currentLayout === '2x2') {
texts.forEach((text, index) => {
const box = document.createElement('div');
box.className = `deng-box deng-box${index + 1}`;
box.style.cssText = `
position: absolute;
top: ${positions[index].top};
${positions[index].left ? `left: ${positions[index].left};` : `right: ${positions[index].right};`}
transform: translateY(${positions[index].translateY});
transform-origin: top center;
z-index: ${100 + index};
animation: singleSwing 3s infinite ease-in-out;
`;
const deng = createDengElement(text);
box.appendChild(deng);
container.appendChild(box);
});
}
// 4x4布局：分组同步晃动
else {
const leftGroup = document.createElement('div');
leftGroup.style.cssText = `
position: absolute;
top: -10px;
left: 0;
width: 100%%;
height: 100%%;
transform-origin: 15%% 0;
animation: groupSwing 3s infinite ease-in-out;
`;
const rightGroup = document.createElement('div');
rightGroup.style.cssText = `
position: absolute;
top: -10px;
right: 0;
width: 100%%;
height: 100%%;
transform-origin: 85%% 0;
animation: groupSwing 3s infinite ease-in-out;
`;
// 左侧4个灯笼
for (let i = 0; i < 4; i++) {
const box = document.createElement('div');
box.className = `deng-box deng-box${i + 1}`;
box.style.cssText = `
position: absolute;
top: ${positions[i].top};
left: ${positions[i].left};
transform: translateY(${positions[i].translateY});
z-index: ${100 + i};
`;
const deng = createDengElement(texts[i]);
box.appendChild(deng);
leftGroup.appendChild(box);
}
// 右侧4个灯笼
for (let i = 4; i < 8; i++) {
const box = document.createElement('div');
box.className = `deng-box deng-box${i + 1}`;
box.style.cssText = `
position: absolute;
top: ${positions[i].top};
right: ${positions[i].right};
transform: translateY(${positions[i].translateY});
z-index: ${100 + i};
`;
const deng = createDengElement(texts[i]);
box.appendChild(deng);
rightGroup.appendChild(box);
}
container.appendChild(leftGroup);
container.appendChild(rightGroup);
}
addSwingStyles();
document.body.appendChild(container);
}
// 封装灯笼创建函数（核心：中国结吊坠）
function createDengElement(text) {
const deng = document.createElement('div');
deng.style.cssText = `
position: relative;
width: 120px;
height: 90px;
background: rgba(216, 0, 15, .8);
border-radius: 50%% 50%%;
box-shadow: -5px 5px 50px 4px #fa6c00;
`;
// 挂线
const xian = document.createElement('div');
xian.style.cssText = `
position: absolute;
top: -30px;
left: 60px;
width: 2px;
height: 30px;
background: #dc8f03;
box-shadow: 0 0 8px 1px #ffd700;
`;
// 灯笼主体
const dengA = document.createElement('div');
dengA.style.cssText = `
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;
`;
const dengB = document.createElement('div');
dengB.style.cssText = `
width: 65px;
height: 83px;
background: rgba(216, 0, 15, .1);
border-radius: 60%%;
border: 2px solid #dc8f03;
`;
// 文字
const dengT = document.createElement('div');
dengT.textContent = text;
dengT.style.cssText = `
font-family: '华文行楷', '微软雅黑', Arial, sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: 700;
line-height: 85px;
text-align: center;
text-shadow: 0 0 8px #ffd700;
`;
// ========== 核心：中国结流苏吊坠 ==========
// 吊坠主杆
const zhuidiaoMain = document.createElement('div');
zhuidiaoMain.style.cssText = `
position: relative;
width: 4px;
height: 15px;
margin: -5px 0 0 59px;
animation: singleSwing 4s infinite ease-in-out;
transform-origin: 50%% -30px;
background: #dc8f03;
border-radius: 2px;
`;
// 中国结主体（方形结）
const zhongguoJie = document.createElement('div');
zhongguoJie.style.cssText = `
position: absolute;
top: 10px;
left: -8px;
width: 20px;
height: 20px;
background: radial-gradient(circle at center, #ff3300 30%%, #cc0000 100%%);
border: 2px solid #ffd700;
border-radius: 4px;
box-shadow: 0 0 10px 2px #ff3300;
animation: jieGlow 2s infinite alternate ease-in-out;
`;
// 中国结装饰金线
const jieLine1 = document.createElement('div');
jieLine1.style.cssText = `
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 2px;
background: #ffd700;
box-shadow: 0 0 5px 1px #ffd700;
`;
const jieLine2 = document.createElement('div');
jieLine2.style.cssText = `
position: absolute;
top: 8px;
left: 3px;
width: 14px;
height: 2px;
background: #ffd700;
box-shadow: 0 0 5px 1px #ffd700;
`;
const jieLine3 = document.createElement('div');
jieLine3.style.cssText = `
position: absolute;
top: 3px;
left: 8px;
width: 2px;
height: 14px;
background: #ffd700;
box-shadow: 0 0 5px 1px #ffd700;
`;
// 流苏穗子（多根金线）
const liusuContainer = document.createElement('div');
liusuContainer.style.cssText = `
position: absolute;
top: 30px;
left: -7px;
width: 18px;
height: 35px;
display: flex;
justify-content: space-between;
animation: liusuWave 3s infinite ease-in-out;
`;
// 生成6根流苏线
for(let i=0; i<6; i++){
const line = document.createElement('div');
line.style.cssText = `
width: 2px;
height: 100%%;
background: linear-gradient(to bottom, #ffd700, #dc8f03);
border-radius: 1px;
box-shadow: 0 0 5px 1px #ffd700;
animation: lineSwing 2.5s infinite ease-in-out ${i*0.2}s;
transform-origin: top center;
`;
liusuContainer.appendChild(line);
}
// 流苏底部吊坠珠
const liusuBall = document.createElement('div');
liusuBall.style.cssText = `
position: absolute;
bottom: -5px;
left: 2px;
width: 14px;
height: 14px;
background: radial-gradient(circle at 30%% 30%%, #ffd700, #dc8f03);
border-radius: 50%%;
box-shadow: 0 0 8px 2px #ffd700;
`;
liusuContainer.appendChild(liusuBall);
// 组装中国结吊坠
zhongguoJie.appendChild(jieLine1);
zhongguoJie.appendChild(jieLine2);
zhongguoJie.appendChild(jieLine3);
zhuidiaoMain.appendChild(zhongguoJie);
zhuidiaoMain.appendChild(liusuContainer);
// 装饰条
const dengTopBorder = document.createElement('div');
dengTopBorder.style.cssText = `
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
z-index: 999;
border-radius: 5px;
border: solid 1px #dc8f03;
background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
box-shadow: 0 0 8px 1px #ffd700;
`;
const dengBottomBorder = document.createElement('div');
dengBottomBorder.style.cssText = `
position: absolute;
bottom: -7px;
left: 30px;
height: 12px;
width: 60px;
border-radius: 5px;
border: solid 1px #dc8f03;
background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
box-shadow: 0 0 8px 1px #ffd700;
`;
// 组装灯笼
dengB.appendChild(dengT);
dengA.appendChild(dengB);
deng.appendChild(xian);
deng.appendChild(dengA);
deng.appendChild(zhuidiaoMain);
deng.appendChild(dengTopBorder);
deng.appendChild(dengBottomBorder);
return deng;
}
// 添加动画样式（新增中国结/流苏动画）
function addSwingStyles() {
const oldStyle = document.querySelector('#swingStyle');
if (oldStyle) oldStyle.remove();
const style = document.createElement('style');
style.id = 'swingStyle';
style.textContent = `
@keyframes singleSwing {
0%% { transform: rotate(-10deg); }
50%% { transform: rotate(10deg); }
100%% { transform: rotate(-10deg); }
}
@keyframes groupSwing {
0%% { transform: rotate(-8deg); }
50%% { transform: rotate(8deg); }
100%% { transform: rotate(-8deg); }
}
/* 中国结呼吸发光 */
@keyframes jieGlow {
0%% { box-shadow: 0 0 10px 2px #ff3300; }
100%% { box-shadow: 0 0 15px 3px #ff0000; }
}
/* 流苏整体波动 */
@keyframes liusuWave {
0%% { transform: translateX(-2px); }
50%% { transform: translateX(2px); }
100%% { transform: translateX(-2px); }
}
/* 单根流苏摆动 */
@keyframes lineSwing {
0%% { transform: rotate(-3deg); }
50%% { transform: rotate(3deg); }
100%% { transform: rotate(-3deg); }
}
/* 移动端适配 */
@media (max-width: 768px) {
.deng-t { font-size: 2rem !important; }
.deng-box { transform: scale(0.6) translateY(var(--translate-y, 20px)) !important; }
.deng-box1 { top: 0 !important; left: 5%% !important; }
.deng-box2 { top: 0 !important; left: 20%% !important; }
.deng-box3 { top: 0 !important; right: 20%% !important; }
.deng-box4 { top: 0 !important; right: 5%% !important; }
.deng-box5 { top: 0 !important; right: 5%% !important; }
.deng-box6 { top: 0 !important; right: 5%% !important; }
.deng-box7 { top: 0 !important; right: 5%% !important; }
.deng-box8 { top: 0 !important; right: 5%% !important; }
}
`;
document.head.appendChild(style);
}
// 绑定事件
function bindEvents() {
document.getElementById('layout1Btn').addEventListener('click', () => {
currentLayout = '2x2';
createDengContainer();
});
document.getElementById('layout2Btn').addEventListener('click', () => {
currentLayout = '4x4';
createDengContainer();
});
document.getElementById('applyTextBtn').addEventListener('click', () => {
const inputText = document.getElementById('lanternText').value.trim();
if (!inputText) return alert('请输入自定义文字');
const requiredLen = currentLayout === '2x2' ? 4 : 8;
if (inputText.length !== requiredLen) {
return alert(`当前布局需要输入${requiredLen}个文字`);
}
currentText = inputText.split('');
createDengContainer();
});
}
// 初始化
function init() {
bindEvents();
createDengContainer();
}
init();
</script>
</body>
</html>
本文最后更新时间 2026-01-20
文章链接地址：https://xzlo.blog/index.php/archives/113/
本站文章除注明[转载|引用|原文]出处外,均为本站原生内容,转载前请注明出处
