Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI震撼体验</title> | |
| <style> | |
| :root { | |
| --slot-height: 60px; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| background-color: #0f0f13; | |
| color: #e5e5e5; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| overflow: hidden; | |
| transition: background-color 0.1s; | |
| } | |
| /* 核爆震动特效 */ | |
| @keyframes shake { | |
| 0% { transform: translate(1px, 1px) rotate(0deg); } | |
| 10% { transform: translate(-1px, -2px) rotate(-1deg); } | |
| 20% { transform: translate(-3px, 0px) rotate(1deg); } | |
| 30% { transform: translate(3px, 2px) rotate(0deg); } | |
| 40% { transform: translate(1px, -1px) rotate(1deg); } | |
| 50% { transform: translate(-1px, 2px) rotate(-1deg); } | |
| 60% { transform: translate(-3px, 1px) rotate(0deg); } | |
| 70% { transform: translate(3px, 1px) rotate(-1deg); } | |
| 80% { transform: translate(-1px, -1px) rotate(1deg); } | |
| 90% { transform: translate(1px, 2px) rotate(0deg); } | |
| 100% { transform: translate(0px, 0px) rotate(0deg); } | |
| } | |
| .nuke-shake { | |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; | |
| } | |
| /* 核爆白闪特效 */ | |
| #nuke-flash { | |
| position: fixed; | |
| top: 0; left: 0; width: 100vw; height: 100vh; | |
| background: #fff; | |
| opacity: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: opacity 0.1s ease-out; | |
| } | |
| .flash-active { | |
| opacity: 1 ; | |
| transition: opacity 0s ; | |
| } | |
| .flash-fade { | |
| opacity: 0 ; | |
| transition: opacity 2s ease-out ; | |
| } | |
| .sentence-container { | |
| font-size: 32px; | |
| font-weight: 800; | |
| line-height: normal; | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| z-index: 10; | |
| } | |
| .row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .static-text { | |
| color: #a0a0b0; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |
| letter-spacing: 2px; | |
| } | |
| .bomb-text { | |
| color: #ff3333; | |
| text-shadow: 0 0 15px rgba(255, 51, 51, 0.4); | |
| } | |
| /* 槽位样式 */ | |
| .slot { | |
| height: var(--slot-height); | |
| background: #1a1a24; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| position: relative; | |
| box-shadow: inset 0 5px 15px rgba(0,0,0,0.8), 0 0 0 2px #333; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .slot::before, .slot::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| height: 15px; | |
| z-index: 5; | |
| pointer-events: none; | |
| } | |
| .slot::before { | |
| top: 0; | |
| background: linear-gradient(to bottom, #1a1a24, transparent); | |
| } | |
| .slot::after { | |
| bottom: 0; | |
| background: linear-gradient(to top, #1a1a24, transparent); | |
| } | |
| #name-slot { width: 250px; } | |
| #model-slot { width: 230px; } | |
| .track { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| /* 关键：滚动物理缓动 */ | |
| transition: transform 0s; | |
| } | |
| .item { | |
| height: var(--slot-height); | |
| line-height: var(--slot-height); | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .name-item { | |
| color: #00f2fe; | |
| text-shadow: 0 0 10px rgba(0, 242, 254, 0.5); | |
| } | |
| .model-item { | |
| color: #fb8500; | |
| text-shadow: 0 0 10px rgba(251, 133, 0, 0.5); | |
| } | |
| /* 按钮与UI */ | |
| .btn-container { | |
| margin-top: 60px; | |
| z-index: 10; | |
| } | |
| button { | |
| padding: 16px 45px; | |
| font-size: 22px; | |
| font-weight: bold; | |
| color: #111; | |
| background: #ffd166; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| box-shadow: 0 6px 0 #cc9b22, 0 15px 20px rgba(0,0,0,0.4); | |
| transition: all 0.1s; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| button:active { | |
| transform: translateY(6px); | |
| box-shadow: 0 0px 0 #cc9b22, 0 5px 10px rgba(0,0,0,0.4); | |
| } | |
| button:disabled { | |
| background: #555; | |
| box-shadow: 0 6px 0 #333; | |
| color: #888; | |
| cursor: not-allowed; | |
| transform: translateY(6px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="nuke-flash"></div> | |
| <div class="sentence-container" id="main-view"> | |
| <div class="row"> | |
| <div class="slot" id="name-slot"> | |
| <div class="track" id="name-track"></div> | |
| </div> | |
| <div class="static-text">首次体验</div> | |
| <div class="slot" id="model-slot"> | |
| <div class="track" id="model-track"></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="static-text">，被吓到眩晕瘫坐，</div> | |
| </div> | |
| <div class="row"> | |
| <div class="static-text bomb-text">那一刻像看到原子弹爆炸。</div> | |
| </div> | |
| </div> | |
| <div class="btn-container"> | |
| <button id="spinBtn">💥 查看下一个瘫坐的人</button> | |
| </div> | |
| <script> | |
| const data = [ | |
| { name: "Demis Hassabis", model: "Gemini 4" }, | |
| { name: "Dario Amodei", model: "Claude 5" }, | |
| { name: "山大王", model: "muse-spark-2" }, | |
| { name: "Elon Musk", model: "Grok 5" }, | |
| { name: "奥特曼", model: "GPT-6" }, | |
| { name: "杨植麟", model: "Kimi K3" }, | |
| { name: "唐杰", model: "GLM-6" }, | |
| { name: "梁文峰", model: "Deepseek-V4" }, | |
| { name: "Bo", model: "RWKV-8" } | |
| ]; | |
| const slotHeight = 60; // 对应CSS中的 --slot-height | |
| const trackRepeat = 20; // 虚拟生成20排来提供足够的滚动距离 | |
| const nameTrack = document.getElementById('name-track'); | |
| const modelTrack = document.getElementById('model-track'); | |
| const spinBtn = document.getElementById('spinBtn'); | |
| const nukeFlash = document.getElementById('nuke-flash'); | |
| const mainView = document.getElementById('main-view'); | |
| // 构建长列表轨道 | |
| function buildTracks() { | |
| nameTrack.innerHTML = ''; | |
| modelTrack.innerHTML = ''; | |
| for(let i = 0; i < trackRepeat; i++) { | |
| data.forEach(item => { | |
| const nameDiv = document.createElement('div'); | |
| nameDiv.className = 'item name-item'; | |
| nameDiv.innerText = item.name; | |
| nameTrack.appendChild(nameDiv); | |
| const modelDiv = document.createElement('div'); | |
| modelDiv.className = 'item model-item'; | |
| modelDiv.innerText = item.model; | |
| modelTrack.appendChild(modelDiv); | |
| }); | |
| } | |
| } | |
| buildTracks(); | |
| // 初始静止状态显示第一个组合 | |
| nameTrack.style.transform = `translateY(0px)`; | |
| modelTrack.style.transform = `translateY(0px)`; | |
| let isSpinning = false; | |
| spinBtn.addEventListener('click', () => { | |
| if (isSpinning) return; | |
| isSpinning = true; | |
| spinBtn.disabled = true; | |
| // 每次点击重置轨道（无动画复位回顶部重新打乱） | |
| nameTrack.style.transition = 'none'; | |
| modelTrack.style.transition = 'none'; | |
| nameTrack.style.transform = `translateY(0px)`; | |
| modelTrack.style.transform = `translateY(0px)`; | |
| // 强制重绘，使重置立即生效 | |
| void nameTrack.offsetWidth; | |
| // 随机抽取一个组合索引 (15组往后能保证转好几圈) | |
| const winnerIndex = Math.floor(Math.random() * data.length); | |
| const targetCycle = trackRepeat - 2; // 停在倒数第二组的对应位置 | |
| const targetPosition = (targetCycle * data.length + winnerIndex) * slotHeight; | |
| // 为名字槽添加转动动画 (转3秒) | |
| nameTrack.style.transition = 'transform 3s cubic-bezier(0.15, 0.85, 0.25, 1)'; | |
| nameTrack.style.transform = `translateY(-${targetPosition}px)`; | |
| // 为模型槽添加转动动画 (转4.5秒，制造等待悬念感) | |
| modelTrack.style.transition = 'transform 4.5s cubic-bezier(0.1, 0.9, 0.2, 1)'; | |
| modelTrack.style.transform = `translateY(-${targetPosition}px)`; | |
| // 监听最后一个槽位停止（核爆时刻！） | |
| setTimeout(() => { | |
| triggerNukeEffect(); | |
| isSpinning = false; | |
| spinBtn.disabled = false; | |
| }, 4500); | |
| }); | |
| function triggerNukeEffect() { | |
| // 步骤1：屏幕瞬间纯白闪瞎 | |
| nukeFlash.classList.add('flash-active'); | |
| // 步骤2：整体剧烈震屏 | |
| mainView.classList.add('nuke-shake'); | |
| document.body.style.backgroundColor = "#330000"; // 背景变红 | |
| // 步骤3：褪去白光，恢复原状 | |
| setTimeout(() => { | |
| nukeFlash.classList.remove('flash-active'); | |
| nukeFlash.classList.add('flash-fade'); | |
| document.body.style.backgroundColor = "#0f0f13"; | |
| }, 50); | |
| // 清理状态 | |
| setTimeout(() => { | |
| mainView.classList.remove('nuke-shake'); | |
| nukeFlash.classList.remove('flash-fade'); | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |