{"html":"\n","css":".tetris-btn {\n --btn-bg: linear-gradient(180deg, #36396a 0%, #181c2b 100%);\n --btn-glow: 0 0 24px 2px #7f5cff, 0 2px 16px 2px #181c2b inset;\n --btn-border: 4px solid #7f5cff;\n --btn-shadow: 0 8px 0 #2e2459, 0 0 32px #7f5cff;\n background: var(--btn-bg);\n border: var(--btn-border);\n border-radius: 16px;\n padding: 28px 48px 34px 48px;\n box-shadow: var(--btn-shadow), var(--btn-glow);\n cursor: pointer;\n outline: none;\n position: relative;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n transition:\n box-shadow 0.18s cubic-bezier(0.4, 1.5, 0.6, 1),\n transform 0.14s cubic-bezier(0.5, 2, 0.5, 1.5),\n border-color 0.18s;\n z-index: 1;\n overflow: visible;\n user-select: none;\n}\n.tetris-btn:before {\n content: \"\";\n display: block;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: 12px;\n opacity: 0.13;\n background: repeating-linear-gradient(\n to bottom,\n transparent 0 2px,\n #fff 2px 3px,\n transparent 3px 5px\n );\n z-index: 4;\n transition: opacity 0.2s;\n}\n.tetris-btn:focus-visible {\n border-color: #ffe866;\n box-shadow:\n 0 0 0 4px #ffe86699,\n 0 8px 0 #2e2459,\n 0 0 32px #ffe866;\n}\n.tetris-btn:active {\n transform: scale(0.96) translateY(2px);\n box-shadow:\n 0 3px 0 #2e2459,\n 0 0 24px #7f5cff;\n}\n.tetris-labell {\n color: #fffaf6;\n font-family: \"Press Start 2P\", monospace, monospace;\n margin-top: 22px;\n font-size: 1.1rem;\n letter-spacing: 2px;\n text-align: center;\n display: block;\n z-index: 3;\n position: relative;\n pointer-events: none;\n user-select: none;\n text-shadow:\n 2px 2px 0 #2e2459,\n -2px 2px 0 #2e2459,\n 2px -2px 0 #2e2459,\n -2px -2px 0 #2e2459,\n 0 0 8px #7f5cff,\n 0 0 12px #ffe866;\n animation: text-glow 2s ease-in-out infinite alternate;\n}\n.tetris-btn:hover .tetris-labele {\n color: #ffe866;\n text-shadow:\n 2px 2px 0 #2e2459,\n -2px 2px 0 #2e2459,\n 2px -2px 0 #2e2459,\n -2px -2px 0 #2e2459,\n 0 0 12px #ffe866,\n 0 0 18px #ffe866,\n 0 0 24px #ffe866;\n transform: scale(1.05);\n letter-spacing: 3px;\n}\n\n@keyframes text-glow {\n from {\n filter: brightness(1);\n transform: scale(1);\n }\n to {\n filter: brightness(1.2);\n transform: scale(1.03);\n }\n}\n\n@keyframes start-text-glow {\n from {\n text-shadow: 0 0 8px #7f5cff;\n color: #fffaf6;\n }\n to {\n text-shadow:\n 0 0 12px #ffe866,\n 0 0 20px #7f5cff;\n color: #fff;\n }\n}\n\n.tetris-btn:hover .tetris-label {\n animation: start-text-glow-hover 1s ease-in-out infinite alternate;\n}\n\n@keyframes start-text-glow-hover {\n from {\n text-shadow:\n 0 0 12px #ffe866,\n 0 0 20px #7f5cff;\n color: #fff;\n }\n to {\n text-shadow:\n 0 0 16px #ffe866,\n 0 0 24px #7f5cff;\n color: #fff;\n }\n}\n.tetris-piece {\n display: grid;\n grid-template-columns: repeat(3, 24px);\n grid-template-rows: repeat(2, 24px);\n gap: 3px;\n width: 81px;\n height: 51px;\n position: relative;\n margin: 0 auto;\n z-index: 2;\n filter: drop-shadow(0 4px 5px #000a);\n transition: filter 0.2s;\n}\n.tetris-btn:hover .block,\n.tetris-btn:focus-visible .block {\n animation: tetris-fall 0.32s cubic-bezier(0.3, 1.6, 0.6, 1.1);\n animation-fill-mode: forwards;\n box-shadow:\n 0 0 16px #ffe866cc,\n 0 4px 0 #000a;\n filter: brightness(1.12) drop-shadow(0 1px 8px #ffe86699);\n}\n@keyframes tetris-fall {\n 0% {\n transform: translateY(0) scale(1);\n }\n 50% {\n transform: translateY(14px) scale(1.1);\n }\n 70% {\n transform: translateY(8px) scale(1.03);\n }\n 100% {\n transform: translateY(0) scale(1);\n }\n}\n.tetris-btn:hover,\n.tetris-btn:focus-visible {\n box-shadow:\n 0 0 0 8px #ffe86644,\n 0 12px 0 #2e2459,\n 0 0 38px #ffe866cc,\n 0 0 64px #7f5cff;\n border-color: #ffe866;\n}\n.t-piece .block {\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n border: 2px solid #fff;\n border-radius: 6px;\n box-shadow:\n 0 4px 0 #2e2459,\n 0 0 0 1.5px #fff4 inset;\n transition:\n background 0.2s,\n box-shadow 0.18s,\n filter 0.2s,\n transform 0.18s;\n width: 24px;\n height: 24px;\n position: relative;\n}\n.t-piece .block:after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 3px;\n width: 7px;\n height: 7px;\n background: radial-gradient(circle, #fff9 60%, transparent 100%);\n opacity: 0.7;\n border-radius: 2px;\n filter: blur(0.5px);\n pointer-events: none;\n}\n.t-piece .block:nth-child(1) {\n grid-area: 1 / 1 / 2 / 2;\n}\n.t-piece .block:nth-child(2) {\n grid-area: 1 / 2 / 2 / 3;\n}\n.t-piece .block:nth-child(3) {\n grid-area: 1 / 3 / 2 / 4;\n}\n.t-piece .block:nth-child(4) {\n grid-area: 2 / 2 / 3 / 3;\n}\n.tetris-btn:after {\n content: \"\";\n position: absolute;\n inset: -10px;\n border-radius: 20px;\n background: radial-gradient(circle, #ffe86633 0 60%, transparent 100%);\n opacity: 0.7;\n pointer-events: none;\n z-index: 1;\n}\n@media (max-width: 600px) {\n .tetris-btn {\n padding: 18px 12px 18px 12px;\n border-radius: 10px;\n }\n .tetris-label {\n font-size: 0.9rem;\n margin-top: 13px;\n }\n}\n@font-face {\n font-family: \"Press Start 2P\";\n src: url(\"s://fonts.gstatic.com/s/pressstart2p/v12/e3t4euO8KNHUehQyT0o8fO4.woff2\")\n format(\"woff2\");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n.tetris-btn {\n position: relative;\n}\n.tetris-tooltip {\n position: absolute;\n left: 50%;\n top: -140px;\n transform: translateX(-50%) scale(0.96);\n pointer-events: none;\n opacity: 0;\n transition:\n opacity 0.2s,\n transform 0.2s;\n z-index: 100;\n padding-bottom: 8px;\n}\n.tetris-btn:hover .tetris-tooltip,\n.tetris-btn:focus-visible .tetris-tooltip {\n pointer-events: auto;\n opacity: 1;\n transform: translateX(-50%) scale(1.08);\n transition-delay: 0.12s;\n}\n.falling-piece {\n position: absolute;\n top: 8px;\n left: 10px;\n display: grid;\n grid-template-columns: repeat(3, 16px);\n grid-template-rows: repeat(2, 16px);\n gap: 2px;\n z-index: 20;\n opacity: 0;\n}\n\n.falling-block {\n width: 16px;\n height: 16px;\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n border: 1px solid #fff;\n border-radius: 2px;\n box-shadow:\n 0 1px 0 #2e2459,\n 0 0 4px #ffe866cc;\n}\n\n.falling-piece .falling-block:nth-child(1) {\n grid-area: 1 / 1 / 2 / 2;\n}\n.falling-piece .falling-block:nth-child(2) {\n grid-area: 1 / 2 / 2 / 3;\n}\n.falling-piece .falling-block:nth-child(3) {\n grid-area: 1 / 3 / 2 / 4;\n}\n.falling-piece .falling-block:nth-child(4) {\n grid-area: 2 / 2 / 3 / 3;\n}\n\n.tetris-btn:hover .falling-piece {\n opacity: 1;\n animation: piece-fall 3s steps(4) forwards;\n}\n\n@keyframes piece-fall {\n 0% {\n transform: translateY(0);\n opacity: 1;\n filter: brightness(1);\n }\n 25% {\n transform: translateY(16px);\n opacity: 1;\n filter: brightness(1);\n }\n 50% {\n transform: translateY(32px);\n opacity: 1;\n filter: brightness(1);\n }\n 75% {\n transform: translateY(38.5px);\n opacity: 1;\n filter: brightness(1);\n }\n 76%,\n 78%,\n 80%,\n 82% {\n transform: translateY(38.5px);\n opacity: 1;\n filter: brightness(2);\n }\n 77%,\n 79%,\n 81%,\n 83% {\n transform: translateY(38.5px);\n opacity: 1;\n filter: brightness(1);\n }\n 84%,\n 100% {\n transform: translateY(38.5px);\n opacity: 0;\n }\n}\n\n.tetris-row:nth-child(4) .board-block.filled {\n animation: block-flash 1.5s steps(1) forwards;\n animation-delay: 2s;\n}\n\n@keyframes block-flash {\n 0% {\n filter: brightness(1);\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n }\n 20%,\n 40%,\n 60% {\n filter: brightness(2);\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n }\n 30%,\n 50%,\n 70% {\n filter: brightness(1);\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n }\n 100% {\n background: #36396a;\n border-color: #181c2b;\n box-shadow: 0 1px 0 #1117;\n opacity: 0.8;\n }\n}\n\n.tetris-row:nth-child(4) {\n animation: none;\n}\n\n.tetris-board {\n background: #232448;\n border: 3px solid #7f5cff;\n border-radius: 8px;\n box-shadow:\n 0 8px 18px #1b133777,\n 0 2px 0 #ffe86644 inset;\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 200px;\n}\n.tetris-row {\n display: flex;\n gap: 2px;\n justify-content: flex-start;\n}\n.board-block {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n background: #36396a;\n border: 1px solid #181c2b;\n box-shadow: 0 1px 0 #1117;\n opacity: 0.8;\n}\n.board-block.filled {\n background: linear-gradient(135deg, #ffe866 0%, #a259fa 85%, #7f5cff 100%);\n border: 1px solid #fff;\n box-shadow:\n 0 1px 0 #2e2459,\n 0 0 4px #ffe866cc;\n opacity: 1;\n}\n.tetris-row {\n opacity: 0;\n transform: translateY(-24px);\n}\n\n.tetris-btn:hover .tetris-row:nth-child(1),\n.tetris-btn:focus-visible .tetris-row:nth-child(1) {\n animation: tetris-row-drop 0.32s 0.05s forwards;\n}\n.tetris-btn:hover .tetris-row:nth-child(2),\n.tetris-btn:focus-visible .tetris-row:nth-child(2) {\n animation: tetris-row-drop 0.32s 0.2s forwards;\n}\n.tetris-btn:hover .tetris-row:nth-child(3),\n.tetris-btn:focus-visible .tetris-row:nth-child(3) {\n animation: tetris-row-drop 0.32s 0.34s forwards;\n}\n.tetris-btn:hover .tetris-row:nth-child(4),\n.tetris-btn:focus-visible .tetris-row:nth-child(4) {\n animation: tetris-row-drop 0.32s 0.48s forwards;\n}\n.tetris-btn:hover .tetris-row:nth-child(5),\n.tetris-btn:focus-visible .tetris-row:nth-child(5) {\n animation: tetris-row-drop 0.32s 0.62s forwards;\n}\n@keyframes tetris-row-drop {\n 0% {\n opacity: 0;\n transform: translateY(-24px);\n }\n 60% {\n opacity: 1;\n transform: translateY(6px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n"}

cowardly-quail-67

👁 实时预览

📝 源代码