{"html":"

\n \n

\n","css":"@import url(\"s://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.mario-block-container {\n height: 30rem;\n width: 30rem;\n background: linear-gradient(to bottom, #7fcafc 0%, #4a90e2 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n}\n\n.mario-block-btn {\n width: 212px;\n height: 64px;\n background-color: #ffcc00;\n border: 4px solid #e6b800;\n border-radius: 6px;\n position: relative;\n box-shadow:\n inset 4px 4px #fff176,\n inset -4px -4px #c28f00,\n 0 4px #b8860b;\n cursor: pointer;\n transition: transform 0.2s ease;\n image-rendering: pixelated;\n}\n\n/* Makes the button lighter on hover */\n.mario-block-btn:hover {\n background-color: #ffe066;\n box-shadow:\n inset 4px 4px #fff9a0,\n inset -4px -4px #d4a200,\n 0 6px #b8860b;\n}\n\n/* Makes the button bounce on click */\n.mario-block-btn:active {\n animation: bounce 0.4s ease-out;\n}\n\n.mario-block-btn:focus {\n outline: none;\n}\n\n@keyframes bounce {\n 0% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-32px);\n }\n 100% {\n transform: translateY(0);\n }\n}\n\n/* 4 Button Dots */\n.mario-block-btn::before,\n.mario-block-btn::after {\n content: \"\";\n position: absolute;\n width: 6px;\n height: 6px;\n background-color: #a67c00;\n border-radius: 50%;\n box-shadow:\n 186px 0 #a67c00,\n 0 38px #a67c00,\n 186px 38px #a67c00;\n}\n\n.mario-block-btn::before {\n top: 6px;\n left: 6px;\n}\n\n/*Shiny glow dot */\n.mario-block-btn::after {\n top: 12px;\n left: 96px;\n background-color: rgba(255, 255, 255, 0.2);\n width: 24px;\n height: 24px;\n border-radius: 50%;\n box-shadow: none;\n}\n\n/* COIN styles */\n.coin {\n position: absolute;\n top: -70px;\n left: 31.5%;\n transform: translateX(-50%);\n width: 66px;\n height: 66px;\n background: transparent;\n image-rendering: pixelated;\n opacity: 0;\n pointer-events: none;\n z-index: 10;\n}\n\n.coin::before {\n content: \"\";\n position: absolute;\n width: 8px;\n height: 8px;\n background: transparent;\n box-shadow:\n 24px 0 #000,\n 32px 0 #000,\n 40px 0 #000,\n 16px 8px #000,\n 48px 8px #000,\n 8px 16px #000,\n 56px 16px #000,\n 8px 24px #000,\n 56px 24px #000,\n 8px 32px #000,\n 56px 32px #000,\n 8px 40px #000,\n 56px 40px #000,\n 16px 48px #000,\n 48px 48px #000,\n 24px 56px #000,\n 32px 56px #000,\n 40px 56px #000,\n 24px 8px #ffce00,\n 32px 8px #ffce00,\n 40px 8px #ffce00,\n 16px 16px #ffce00,\n 24px 16px #ffce00,\n 32px 16px #ffce00,\n 40px 16px #ffce00,\n 48px 16px #ffce00,\n 16px 24px #ffce00,\n 24px 24px #ffce00,\n 32px 24px #ffce00,\n 40px 24px #ffce00,\n 48px 24px #ffce00,\n 16px 32px #ffce00,\n 24px 32px #ffce00,\n 32px 32px #ffce00,\n 40px 32px #ffce00,\n 48px 32px #ffce00,\n 16px 40px #ffce00,\n 24px 40px #ffce00,\n 32px 40px #ffce00,\n 40px 40px #ffce00,\n 48px 40px #ffce00,\n 24px 48px #ffce00,\n 32px 48px #ffce00,\n 40px 48px #ffce00,\n 24px 16px #ffe066,\n 16px 24px #ffe066,\n 16px 32px #ffe066,\n 16px 40px #ffe066,\n 48px 24px #a67c00,\n 48px 32px #a67c00,\n 48px 40px #a67c00,\n 40px 48px #a67c00,\n 32px 16px #fff,\n 32px 24px #fff,\n 32px 32px #fff,\n 32px 40px #fff,\n 24px 16px #ffffff,\n 32px 16px #ffffff,\n 24px 24px #ffffff,\n 40px 16px #ffe066,\n 40px 24px #ffe066,\n 32px 32px #ffe066,\n 24px 32px #ffe066,\n 48px 24px #8a6700,\n 48px 32px #8a6700,\n 48px 40px #8a6700,\n 40px 48px #8a6700,\n 32px 48px #8a6700;\n}\n\n.coin {\n filter: drop-shadow(0 0 5px #ffd700) brightness(1.1);\n}\n\n@keyframes coinShine {\n 0%,\n 100% {\n filter: brightness(1) drop-shadow(0 0 5px #ffd700);\n }\n 50% {\n filter: brightness(1.2) drop-shadow(0 0 10px #ffd700);\n }\n}\n\n.coin::before {\n animation: coinShine 2s infinite;\n}\n\n/* Pop coin on :active */\n.mario-block-btn:active .coin {\n animation: coin-pop 0.6s ease-out forwards;\n}\n\n@keyframes coin-pop {\n 0% {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n 50% {\n transform: translateX(-50%) translateY(-64px);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50%) translateY(-80px);\n opacity: 0;\n }\n}\n\n.question-mark {\n font-family: \"Press Start 2P\", monospace;\n font-size: 32px;\n color: #ffffff;\n text-shadow:\n 2px 2px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n pointer-events: none;\n}\n\n/* Clouds */\n.cloud {\n position: absolute;\n background-color: white;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n image-rendering: pixelated;\n animation: cloudMove 30s ease-in-out infinite alternate;\n}\n\n.cloud-1 {\n top: 50px;\n left: 40px;\n width: 26px;\n height: 16px;\n box-shadow:\n 0 0 0 3px white,\n 16px 0 white,\n -8px 8px white,\n 8px 8px white,\n 24px 8px white,\n -16px 16px white,\n 0 16px white,\n 16px 16px white,\n 30px 16px white,\n -22px 24px white,\n 1px 24px white,\n 24px 24px white,\n -16px 32px white,\n 0 32px white,\n 16px 32px white;\n}\n\n.cloud-2 {\n top: 140px;\n left: 200px;\n width: 32px;\n height: 24px;\n box-shadow:\n 4px 0 white,\n 3px 0 white,\n -7px 9px white,\n 3px -1px white,\n 18px 9px white,\n 0 14px white,\n 12px 12px white;\n}\n\n.cloud-3 {\n top: 300px;\n left: 380px;\n width: 43px;\n height: 36px;\n box-shadow:\n 8px 0 white,\n 2px 0 white,\n -12px 9px white,\n 3px -1px white,\n 18px 8px white,\n 0 14px white,\n 12px 12px white;\n}\n\n.cloud-4 {\n top: 350px;\n left: 70px;\n width: 33px;\n height: 24px;\n box-shadow:\n 10px 2px white,\n 18px 9px white,\n -8px 8px white,\n 8px 8px white,\n 24px 8px white,\n -13px 16px white,\n 0 16px white,\n 16px 16px white,\n 30px 16px white,\n -8px 24px white,\n 8px 24px white,\n 24px 24px white,\n -1px 31px white,\n 8px 32px white,\n 12px 30px white;\n}\n\n.cloud-5 {\n top: 27px;\n left: 375px;\n width: 24px;\n height: 16px;\n box-shadow:\n 0 0 0 4px white,\n 16px 0 white,\n -12px 8px white,\n 8px 8px white,\n 28px 8px white,\n -18px 19px white,\n 0 16px white,\n 16px 16px white,\n 30px 16px white,\n -8px 24px white,\n 8px 24px white,\n 25px 24px white,\n -12px 30px white,\n 0px 32px white,\n 16px 32px white;\n}\n\n/* Cloud Animations */\n@keyframes cloudMove {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(120px);\n }\n}\n\n.cloud-1 {\n animation-duration: 40s;\n}\n\n.cloud-2 {\n animation-duration: 35s;\n}\n\n.cloud-3 {\n animation-duration: 45s;\n}\n\n.cloud-4 {\n animation-duration: 38s;\n}\n\n.cloud-5 {\n animation-duration: 50s;\n}\n"}

curvy-fox-55

👁 实时预览

📝 源代码