JS特效-新年（灯笼）
(function () { // 动态添加样式 const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 防止页面滚动 */ body { overflow: hidden; width: 100vw; height: 100vh; } /* 灯笼容器样式 */ .deng-box { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none; animation: float 7s ease-in-out infinite 1s; filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); } /* 灯笼主体 - 经典中国红 */ .deng-box1 .deng, .deng { position: relative; width: 140px; height: 110px; margin: 50px; background: #d8000f; border-radius: 50% 50%; transform-origin: 50% -120px; animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 60px 8px rgba(250, 108, 0, 0.6), 0 0 20px rgba(255, 255, 0, 0.4) inset; transition: all 0.3s; cursor: pointer; } .deng:hover { transform: scale(1.08); box-shadow: -5px 5px 70px 10px rgba(250, 108, 0, 0.7), 0 0 30px rgba(255, 255, 0, 0.5) inset; filter: brightness(1.1); } .deng-box1 .deng { animation: swing 5s infinite ease-in-out; } /* 灯笼内部装饰 */ .deng-a { position: relative; width: 120px; height: 110px; background: rgba(216, 0, 15, 0.1); margin: 15px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03; box-shadow: 0 0 12px rgba(255, 215, 0, 0.5) inset; overflow: hidden; } .deng-a:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 30%, rgba(255, 215, 0, 0.3) 100%); border-radius: 50%; } .deng-b { position: relative; width: 55px; height: 110px; background: rgba(216, 0, 15, 0.1); margin: -4px 8px 8px 32px; border-radius: 50% 50%; border: 2px solid #dc8f03; box-shadow: 0 0 12px rgba(255, 215, 0, 0.5) inset; overflow: hidden; } .deng-b:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 30%, rgba(255, 215, 0, 0.3) 100%); border-radius: 50%; } /* 灯笼挂绳 */ .xian { position: absolute; top: -25px; left: 70px; width: 2px; height: 25px; background: linear-gradient(to bottom, #dc8f03, #f5d742); box-shadow: 0 0 4px rgba(255, 215, 0, 0.6); } /* 灯笼穗子 - 金色渐变 */ .shui-a { position: relative; width: 5px; height: 25px; margin: -5px 0 0 67px; animation: swing 4s infinite ease-in-out; transform-origin: 50% -50px; background: linear-gradient(to bottom, #dc8f03, #ffcc00); border-radius: 0 0 5px 5px; } .shui-b { position: absolute; top: 16px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; box-shadow: 0 0 6px #ffcc00; } .shui-c { position: absolute; top: 20px; left: -2px; width: 10px; height: 45px; background: linear-gradient(to bottom, #dc8f03, #ffcc00); border-radius: 0 0 0 5px; } /* 灯笼顶部和底部装饰 */ .deng:before { position: absolute; top: -7px; left: 34px; height: 12px; width: 70px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 2px #dc8f03; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03); box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 70px; content: " "; display: block; margin-left: 25px; border-radius: 0 0 5px 5px; border: solid 2px #dc8f03; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03); box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); } /* 灯笼文字 - 经典红色 */ .deng-t { font-family: "华文行楷", "楷体", Arial, sans-serif; font-size: 3.8rem; color: #ffd700; text-shadow: 0 0 12px #D8000F; font-weight: bold; line-height: 105px; text-align: center; user-select: none; } /* 灯笼光晕效果 - 金色 */ .light-effect { position: fixed; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 215, 0, 0.5) 0%, transparent 70%); filter: blur(25px); z-index: -1; pointer-events: none; opacity: 0; animation: lightPulse 3s infinite ease-in-out; } /* 高亮节日文字元素 - 红色 */ .festival-text { position: fixed; font-family: "华文行楷", "楷体", sans-serif; font-size: 4rem; color: #d8000f; text-shadow: 0 0 10px #ffd700; animation: floatText 30s infinite ease-in-out; opacity: 0; z-index: -1; pointer-events: none; font-weight: bold; transition: opacity 2s ease-in-out; } /* 节日祝福语 */ .greeting { position: fixed; bottom: 30px; left: 0; width: 100%; text-align: center; font-family: "华文行楷", "楷体", sans-serif; font-size: 3rem; color: #d8000f; text-shadow: 0 0 15px #ffd700; z-index: 9999; pointer-events: none; animation: textGlow 3s infinite alternate; } /* 灯笼点击效果 - 金色 */ .click-effect { position: fixed; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.7) 0%, rgba(255, 215, 0, 0) 70%); animation: clickEffect 1s ease-out forwards; pointer-events: none; z-index: 9999; } /* 灯笼粒子效果 - 金色 */ .lantern-particle { position: fixed; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 215, 0, 0.7); box-shadow: 0 0 8px #ffd700; animation: particleFloat 4s linear infinite; pointer-events: none; z-index: -1; } /* 鞭炮效果 */ .firecracker { position: fixed; width: 6px; height: 18px; background: linear-gradient(to bottom, #ff0000, #ff6600); border-radius: 2px; z-index: 9999; animation: firecrackerFall 1s ease-in forwards; } .explosion { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #ff6600, #ff0000); box-shadow: 0 0 15px #ff6600; z-index: 9999; animation: explosion 0.5s ease-out forwards; } .explosion-particle { position: fixed; width: 3px; height: 3px; border-radius: 50%; background: #ffcc00; box-shadow: 0 0 6px #ffcc00; z-index: 9999; animation: explosionParticle 1s ease-out forwards; } .paper-fragment { position: fixed; width: 3px; height: 5px; background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 204, 0, 0.6)); border-radius: 2px 5px; z-index: 9999; animation: fragmentFall 1.5s ease-in forwards; transform-origin: center; box-shadow: 0 0 4px rgba(255, 0, 0, 0.5); } /* 动画效果 */ @keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes clickEffect { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } @keyframes floatText { 0%, 100% { transform: translate(var(--startX), var(--startY)) rotate(var(--rotate)) scale(1); opacity: 0; } 20%, 80% { opacity: 0.8; } 50% { transform: translate(var(--midX), var(--midY)) rotate(var(--rotate)) scale(1.1); } } @keyframes particleFloat { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; } } @keyframes firecrackerFall { 0% { transform: translateY(-150px) rotate(0deg); opacity: 1; } 100% { transform: translateY(0) rotate(360deg); opacity: 1; } } @keyframes explosion { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(12); opacity: 0; } } @keyframes explosionParticle { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; } } @keyframes fragmentFall { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translate(var(--px), var(--py)) rotate(var(--rotate)) scale(0.3); opacity: 0; } } @keyframes lightPulse { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 0.6; transform: scale(1.1); } } @keyframes textGlow { 0% { text-shadow: 0 0 10px #ffd700; } 100% { text-shadow: 0 0 25px #ffd700; } } /* 响应式调整 */ @media (max-width: 768px) { .deng-box, .deng-box1 { transform: scale(0.7); } .greeting { font-size: 2.2rem; } .festival-text { font-size: 3rem; } .deng { width: 120px; height: 90px; } .deng-t { font-size: 3.2rem; line-height: 85px; } } `; document.head.appendChild(style); // 经典节日文字 const texts = ['福', '禄', '寿', '喜', '财', '吉', '祥', '春', '节', '乐']; // 添加高亮节日文字元素 function createFestivalTexts() { for (let i = 0; i < 15; i++) { const text = document.createElement('div'); text.className = 'festival-text'; text.textContent = texts[Math.floor(Math.random() * texts.length)]; // 随机起始位置 const startX = Math.random() * window.innerWidth; const startY = Math.random() * window.innerHeight; text.style.left = `${startX}px`; text.style.top = `${startY}px`; // 随机运动路径 const midX = startX + (Math.random() - 0.5) * 300; const midY = startY + (Math.random() - 0.5) * 300; text.style.setProperty('--startX', '0px'); text.style.setProperty('--startY', '0px'); text.style.setProperty('--midX', `${midX - startX}px`); text.style.setProperty('--midY', `${midY - startY}px`); text.style.setProperty('--rotate', `${Math.random() * 30 - 15}deg`); // 随机动画时间 const duration = Math.random() * 20 + 25; text.style.animationDuration = `${duration}s`; // 随机延迟 text.style.animationDelay = `${Math.random() * 8}s`; // 随机大小 const size = Math.random() * 2 + 3; text.style.fontSize = `${size}rem`; document.body.appendChild(text); // 随机显示/隐藏 animateTextFade(text); } } // 文字淡入淡出动画 function animateTextFade(text) { let isVisible = false; const minDelay = 3000; const maxDelay = 8000; function toggleVisibility() { isVisible = !isVisible; text.style.opacity = isVisible ? '0.8' : '0'; const nextDelay = Math.random() * (maxDelay - minDelay) + minDelay; setTimeout(toggleVisibility, nextDelay); } // 初始延迟 const initialDelay = Math.random() * 5000; setTimeout(toggleVisibility, initialDelay); } // 创建鞭炮爆炸效果 function createFirecrackerExplosion(x, y) { // 创建鞭炮下落效果 - 从当前位置上方150px处落下 const firecracker = document.createElement('div'); firecracker.className = 'firecracker'; firecracker.style.left = `${x}px`; firecracker.style.top = `${y - 150}px`; document.body.appendChild(firecracker); // 鞭炮落地后爆炸 setTimeout(() => { firecracker.remove(); // 创建爆炸中心 const explosion = document.createElement('div'); explosion.className = 'explosion'; explosion.style.left = `${x - 4}px`; explosion.style.top = `${y - 4}px`; document.body.appendChild(explosion); // 创建爆炸粒子 for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.className = 'explosion-particle'; particle.style.left = `${x}px`; particle.style.top = `${y}px`; // 随机运动方向 const px = (Math.random() - 0.5) * 100; const py = (Math.random() - 0.5) * 100; particle.style.setProperty('--px', `${px}px`); particle.style.setProperty('--py', `${py}px`); document.body.appendChild(particle); // 移除粒子 setTimeout(() => { particle.remove(); }, 1000); } // 创建爆炸碎片 for (let i = 0; i < 20; i++) { const fragment = document.createElement('div'); fragment.className = 'paper-fragment'; fragment.style.left = `${x}px`; fragment.style.top = `${y}px`; // 随机运动方向 const px = (Math.random() - 0.5) * 100; const py = Math.random() * 100 + 50; fragment.style.setProperty('--px', `${px}px`); fragment.style.setProperty('--py', `${py}px`); fragment.style.setProperty('--rotate', `${Math.random() * 360}deg`); document.body.appendChild(fragment); // 移除碎片 setTimeout(() => { fragment.remove(); }, 1500); } // 移除爆炸中心 setTimeout(() => { explosion.remove(); }, 500); }, 1000); } // 随机生成鞭炮爆炸 - 修改后的版本 function randomFirecracker() { // 在整个页面范围内随机位置 const x = Math.random() * window.innerWidth; const y = Math.random() * window.innerHeight; // 确保鞭炮不会太靠近边缘 const margin = 50; const adjustedX = Math.max(margin, Math.min(x, window.innerWidth - margin)); const adjustedY = Math.max(margin, Math.min(y, window.innerHeight - margin)); createFirecrackerExplosion(adjustedX, adjustedY); // 随机下次爆炸时间 const nextDelay = Math.random() * 3000 + 2000; setTimeout(randomFirecracker, nextDelay); } // 创建灯笼粒子效果 function createLanternParticles(x, y, count = 10) { for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.className = 'lantern-particle'; particle.style.left = `${x}px`; particle.style.top = `${y}px`; // 随机运动方向 const px = (Math.random() - 0.5) * 200; const py = (Math.random() - 0.5) * 200; particle.style.setProperty('--px', `${px}px`); particle.style.setProperty('--py', `${py}px`); // 随机大小 const size = Math.random() * 3 + 3; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // 随机动画时间 const duration = Math.random() * 2 + 3; particle.style.animationDuration = `${duration}s`; document.body.appendChild(particle); // 动画结束后移除 setTimeout(() => { particle.remove(); }, duration * 1000); } } // 创建灯笼光晕效果 function createLightEffect(x, y) { const light = document.createElement('div'); light.className = 'light-effect'; light.style.left = `${x - 100}px`; light.style.top = `${y - 100}px`; document.body.appendChild(light); // 淡出效果 setTimeout(() => { light.style.opacity = '0'; light.style.transition = 'opacity 1s'; // 移除元素 setTimeout(() => { light.remove(); }, 1000); }, 800); } // 创建灯笼点击效果 function createClickEffect(x, y) { const effect = document.createElement('div'); effect.className = 'click-effect'; effect.style.left = `${x - 25}px`; effect.style.top = `${y - 25}px`; document.body.appendChild(effect); // 创建粒子效果 createLanternParticles(x, y, 20); // 动画结束后移除 setTimeout(() => { effect.remove(); }, 1000); } // 创建灯笼 const createLantern = (boxClass, text) => { const box = document.createElement('div'); box.className = boxClass; 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.innerText = text; 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'; dengB.appendChild(dengT); dengA.appendChild(dengB); shuiA.appendChild(shuiC); shuiA.appendChild(shuiB); deng.appendChild(xian); deng.appendChild(dengA); deng.appendChild(shuiA); box.appendChild(deng); // 添加灯笼点击事件 deng.addEventListener('click', (e) => { createClickEffect(e.clientX, e.clientY); createLightEffect(e.clientX, e.clientY); createFirecrackerExplosion(e.clientX, e.clientY); }); // 初始粒子效果 const initialX = box.offsetLeft + 70; const initialY = box.offsetTop + 55; createLanternParticles(initialX, initialY, 10); setInterval(() => { createLanternParticles(initialX, initialY, 5); }, 4000); document.body.appendChild(box); // 为灯笼添加光晕效果 createLightEffect(initialX, initialY); }; // 创建灯笼1 (春) createLantern('deng-box', '春'); // 创建灯笼2 (节) createLantern('deng-box1', '节'); // 添加节日祝福语 const greeting = document.createElement('div'); greeting.className = 'greeting'; greeting.textContent = '新春快乐 万事如意'; document.body.appendChild(greeting); // 创建高亮节日文字 createFestivalTexts(); // 开始随机鞭炮爆炸 setTimeout(randomFirecracker, 2000); // 持续更新节日文字位置 setInterval(() => { // 移除屏幕外的文字 document.querySelectorAll('.festival-text').forEach(text => { const rect = text.getBoundingClientRect(); if (rect.right < 0 || rect.bottom < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight) { text.remove(); } }); // 补充新的文字 const currentCount = document.querySelectorAll('.festival-text').length; if (currentCount < 15) { createFestivalTexts(); } }, 5000); })();
