S U P E R T A N G

中国 · 苏州

/* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 动态背景容器 */ .background { width: 100%; height: 100%; position: relative; overflow: hidden; background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%); } /* 添加动态光斑效果 */ .background::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); animation: float 30s infinite linear; } /* 添加动态线条效果 */ .background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%); animation: float 20s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-100px) translateX(100px); } } /* 毛玻璃效果 */ .blurred-overlay { width: 100%; height: 100%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); } /* 内容区域 */ .content { text-align: center; color: white; padding: 2rem; background: rgba(0, 0, 0, 0.4); border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); position: relative; overflow: hidden; max-width: 800px; width: 90%; margin: 0 5%; } /* 移动设备适配 */ @media (max-width: 768px) { .content { padding: 1.5rem; font-size: 0.9rem; } .dynamic-text span { font-size: 2.5rem; } p { font-size: 1.1rem; } } /* 文字动画 */ .dynamic-text span { display: inline-block; font-size: 3.5rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; animation: textAnimate 4s infinite ease-in-out; } /* 地址文字 */ p { font-size: 1.3rem; margin-bottom: 2.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; animation: floatText 4s infinite ease-in-out; } /* 动态艺术元素 */ .art-element { position: absolute; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.3s ease; animation: floatElement 10s infinite; } @keyframes floatElement { 0% { transform: translateY(0) translateX(0) scale(1); } 50% { transform: translateY(-20px) translateX(20px) scale(1.2); } 100% { transform: translateY(0) translateX(0) scale(1); } }document.addEventListener('DOMContentLoaded', () => { // 创建动态艺术元素 const artContainer = document.querySelector('.art-container'); // 根据屏幕大小创建不同数量的动态元素 const numElements = window.innerWidth > 768 ? 10 : 5; for (let i = 0; i < numElements; i++) { const element = document.createElement('div'); element.className = 'art-element'; // 随机位置 element.style.left = `${Math.random() * 100}%`; element.style.top = `${Math.random() * 100}%`; // 随机大小 const size = Math.random() * 30 + 20; element.style.width = `${size}px`; element.style.height = `${size}px`; // 随机颜色 const randomColor = Math.random() * 360; element.style.background = `hsla(${randomColor}, 100%, 50%, 0.1)`; // 随机动画延迟 element.style.animationDelay = `${Math.random() * 10}s`; artContainer.appendChild(element); } // 添加触摸交互效果 if ('ontouchstart' in window) { document.addEventListener('touchstart', (e) => { const touch = e.touches[0]; const element = document.createElement('div'); element.className = 'touch-ripple'; element.style.left = `${touch.clientX}px`; element.style.top = `${touch.clientY}px`; document.body.appendChild(element); setTimeout(() => { element.remove(); }, 1000); }); } // 保持原有的进入按钮功能 const enterBtn = document.querySelector('.enter-btn'); enterBtn.addEventListener('click', () => { // 你的原有代码... }); });document.addEventListener('DOMContentLoaded', () => { // 创建动态艺术元素 const artContainer = document.querySelector('.art-container'); // 根据屏幕大小创建不同数量的动态元素 const numElements = window.innerWidth > 768 ? 10 : 5; for (let i = 0; i < numElements; i++) { const element = document.createElement('div'); element.className = 'art-element'; // 随机位置 element.style.left = `${Math.random() * 100}%`; element.style.top = `${Math.random() * 100}%`; // 随机大小 const size = Math.random() * 30 + 20; element.style.width = `${size}px`; element.style.height = `${size}px`; // 随机颜色 const randomColor = Math.random() * 360; element.style.background = `hsla(${randomColor}, 100%, 50%, 0.1)`; // 随机动画延迟 element.style.animationDelay = `${Math.random() * 10}s`; artContainer.appendChild(element); } // 添加触摸交互效果 if ('ontouchstart' in window) { document.addEventListener('touchstart', (e) => { const touch = e.touches[0]; const element = document.createElement('div'); element.className = 'touch-ripple'; element.style.left = `${touch.clientX}px`; element.style.top = `${touch.clientY}px`; document.body.appendChild(element); setTimeout(() => { element.remove(); }, 1000); }); } // 保持原有的进入按钮功能 const enterBtn = document.querySelector('.enter-btn'); enterBtn.addEventListener('click', () => { // 你的原有代码... }); });/* 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 动态背景容器 */ .background { width: 100%; height: 100%; position: relative; overflow: hidden; background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%); } /* 添加动态光斑效果 */ .background::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); animation: float 30s infinite linear; } /* 添加动态线条效果 */ .background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%); animation: float 20s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-100px) translateX(100px); } } /* 毛玻璃效果 */ .blurred-overlay { width: 100%; height: 100%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); } /* 内容区域 */ .content { text-align: center; color: white; padding: 2rem; background: rgba(0, 0, 0, 0.4); border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); position: relative; overflow: hidden; max-width: 800px; width: 90%; margin: 0 5%; } /* 移动设备适配 */ @media (max-width: 768px) { .content { padding: 1.5rem; font-size: 0.9rem; } .dynamic-text span { font-size: 2.5rem; } p { font-size: 1.1rem; } } /* 文字动画 */ .dynamic-text span { display: inline-block; font-size: 3.5rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; animation: textAnimate 4s infinite ease-in-out; } /* 地址文字 */ p { font-size: 1.3rem; margin-bottom: 2.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); position: relative; animation: floatText 4s infinite ease-in-out; } /* 动态艺术元素 */ .art-element { position: absolute; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.3s ease; animation: floatElement 10s infinite; } @keyframes floatElement { 0% { transform: translateY(0) translateX(0) scale(1); } 50% { transform: translateY(-20px) translateX(20px) scale(1.2); } 100% { transform: translateY(0) translateX(0) scale(1); } }/* 动态光斑效果 */ .light-spots { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .light-spot { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); opacity: 0.2; animation: floatSpot 30s infinite linear; } @keyframes floatSpot { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-100px) translateX(100px); } } /* 触摸涟漪效果 */ .touch-ripple { position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: ripple 1s ease-out forwards; } @keyframes ripple { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(3); opacity: 0; } }document.addEventListener('DOMContentLoaded', () => { // 定义颜色方案 const colorSchemes = [ ['#FF6B6B', '#4ECDC4'], // 珊瑚红到薄荷绿 ['#6C5CE7', '#A368F7'], // 紫罗兰到紫色 ['#83A4D4', '#B6FBFF'], // 浅蓝到天蓝 ['#FF9A9E', '#FAD0C4'], // 粉红到浅橙 ['#667EEA', '#764BA2'] // 紫色到深紫 ]; function generateGradient() { // 随机选择一个颜色方案 const [color1, color2] = colorSchemes[Math.floor(Math.random() * colorSchemes.length)]; // 随机选择渐变方向 const gradientDirection = Math.random() < 0.5 ? '45deg' : '135deg'; // 更新背景 const background = document.querySelector('.background'); background.style.background = `linear-gradient(${gradientDirection}, ${color1} 0%, ${color2} 100%)`; // 创建动态光斑 const lightSpots = document.createElement('div'); lightSpots.className = 'light-spots'; background.appendChild(lightSpots); // 创建多个光斑 for (let i = 0; i < 5; i++) { const spot = document.createElement('div'); spot.className = 'light-spot'; spot.style.left = `${Math.random() * 100}%`; spot.style.top = `${Math.random() * 100}%`; spot.style.animationDelay = `${Math.random() * 10}s`; lightSpots.appendChild(spot); } } // 初始化背景 generateGradient(); // 每30秒更新一次背景 setInterval(generateGradient, 30000); // 添加触摸交互效果 if ('ontouchstart' in window) { document.addEventListener('touchstart', (e) => { const touch = e.touches[0]; const element = document.createElement('div'); element.className = 'touch-ripple'; element.style.left = `${touch.clientX}px`; element.style.top = `${touch.clientY}px`; document.body.appendChild(element); setTimeout(() => { element.remove(); }, 1000); }); } // 保持原有的进入按钮功能 const enterBtn = document.querySelector('.enter-btn'); enterBtn.addEventListener('click', () => { // 你的原有代码... }); });