🧲 音节归位战 · 美音拼读 · 1/8
加载中...
把磁铁拖到正确位置！点🔊听整词，点▶️听音节
👆 按住磁铁拖动，松手放入槽位。点击绿色槽位可听发音
⚡ 音节归位战 · 触摸版 A2.0
background: linear-gradient(145deg, #1e3c72 0%, #2a5298 100%); color: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; position: relative; touch-action: pan-y; } .brand-logo { position: absolute; top: 18px; left: 18px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 48px; font-weight: 700; font-size: 22px; letter-spacing: 1.5px; color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 6px 12px rgba(0,0,0,0.15); z-index: 20; pointer-events: none; line-height: 1.2; } .game-box { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 48px; padding: 28px 20px 24px; max-width: 550px; width: 100%; box-shadow: 0 25px 35px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.15); transition: all 0.2s; position: relative; margin-top: 8px; } .word-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; } .chinese { font-size: 52px; font-weight: 800; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); letter-spacing: 2px; } .speaker-btn { background: rgba(255, 255, 255, 0.2); border: none; border-radius: 50px; padding: 12px 22px; font-size: 36px; cursor: pointer; transition: 0.15s; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.1); color: white; line-height: 1; touch-action: manipulation; } .speaker-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); background: #06d6a0; } .slots { display: flex; justify-content: center; gap: 14px; margin: 28px 0 18px; flex-wrap: wrap; } .slot { width: 95px; height: 95px; background: rgba(255, 255, 255, 0.12); border-radius: 24px; border: 3px dashed rgba(255, 255, 255, 0.45); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: bold; color: white; transition: 0.2s; text-transform: lowercase; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); touch-action: manipulation; } .slot.filled { background: #06d6a0; border: none; box-shadow: 0 7px 0 #04967a, inset 0 2px 5px rgba(255,255,255,0.3); cursor: pointer; color: #1a2a3a; } .slot.filled:active { transform: translateY(3px); box-shadow: 0 4px 0 #04967a, inset 0 2px 5px rgba(255,255,255,0.2); } .magnets { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 10px 0 25px; } .magnet { background: #ffd166; color: #1a1a2e; padding: 16px 22px; border-radius: 32px; font-size: 34px; font-weight: 700; box-shadow: 0 9px 0 #b38f40, 0 4px 8px rgba(0,0,0,0.1); user-select: none; transition: 0.1s; min-width: 95px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid rgba(255,255,240,0.6); text-transform: lowercase; touch-action: none; /* 禁止浏览器滚动/缩放，由我们控制触摸 */ cursor: grab; -webkit-tap-highlight-color: transparent; } .magnet:active { cursor: grabbing; } .magnet.dragging-clone { position: fixed; z-index: 9999; pointer-events: none; opacity: 0.9; transform: scale(1.05); box-shadow: 0 15px 20px rgba(0,0,0,0.3); background: #ffd166; border: 3px solid white; transition: none; } .magnet.placed { opacity: 0; pointer-events: none; transition: opacity 0.2s; } .play-syllable { background: rgba(0,0,0,0.08); border: none; font-size: 24px; cursor: pointer; padding: 6px 8px; border-radius: 40px; transition: 0.1s; line-height: 1; color: #1e3c72; touch-action: manipulation; pointer-events: auto; } .play-syllable:active { background: rgba(0, 0, 0, 0.25); color: white; } .message { margin: 16px 0 12px; font-size: 22px; min-height: 58px; padding: 0 8px; font-weight: 500; text-shadow: 0 2px 5px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; } .btn-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 8px 0 16px; } .btn { background: #ef476f; border: none; color: white; font-size: 22px; padding: 14px 28px; border-radius: 60px; box-shadow: 0 7px 0 #b32e4e; cursor: pointer; transition: 0.1s; font-weight: bold; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.2); touch-action: manipulation; } .btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #b32e4e; } .btn.secondary { background: #118ab2; box-shadow: 0 7px 0 #0a5c7a; } .progress { font-size: 19px; opacity: 0.95; margin-bottom: 10px; font-weight: 500; letter-spacing: 0.5px; } .voice-selector { margin: 12px 0 6px; font-size: 16px; opacity: 0.9; display: flex; align-items: center; justify-content: center; gap: 8px; } select { background: rgba(255, 255, 255, 0.95); border: none; border-radius: 40px; padding: 8px 16px; font-size: 15px; font-weight: 500; color: #1e3c72; outline: none; cursor: pointer; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } .tap-hint { font-size: 17px; opacity: 0.85; margin-top: 12px; margin-bottom: 4px; font-weight: 400; } .version-footer { text-align: center; margin-top: 18px; margin-bottom: 6px; font-size: 22px; font-weight: 600; letter-spacing: 2px; color: rgba(255, 255, 255, 0.95); text-shadow: 0 3px 6px rgba(0,0,0,0.3); background: rgba(255,255,255,0.05); padding: 8px 18px; border-radius: 60px; display: inline-block; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.15); width: fit-content; margin-left: auto; margin-right: auto; } .version-footer span { font-weight: 300; font-size: 18px; opacity: 0.9; margin-left: 6px; } @media (max-width: 480px) { .game-box { padding: 20px 14px; } .chinese { font-size: 44px; } .slot { width: 80px; height: 80px; font-size: 32px; } .magnet { font-size: 28px; padding: 12px 16px; min-width: 80px; } .brand-logo { font-size: 18px; padding: 6px 16px; top: 14px; left: 14px; } .version-footer { font-size: 20px; } }
🧲 音节归位战 · 美音拼读 · 1/8
加载中...
把磁铁拖到正确位置！点🔊听整词，点▶️听音节
👆 按住磁铁拖动，松手放入槽位。点击绿色槽位可听发音
⚡ 音节归位战 · 触摸版 A2.0