{"html":"

\n \n\n

\n\n

\n\n \n

\n \n\n

\n \n OFF\n ON\n \n

\n","css":".wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 80px;\n background: transparent;\n}\n\n.machine-container {\n position: relative;\n width: 200px;\n height: 120px;\n}\n\n#toggle-input {\n display: none;\n}\n\n.box {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 70px;\n background: #2c3e50;\n border-radius: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5;\n box-shadow: 0 10px 0 #1a252f;\n}\n\n.btn {\n width: 120px;\n height: 40px;\n background: #e74c3c;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n font-weight: 900;\n font-family: sans-serif;\n border-bottom: 4px solid #c0392b;\n z-index: 10;\n user-select: none;\n position: relative;\n}\n\n.btn-text-on {\n display: none;\n}\n#toggle-input:checked ~ .box .btn-text-off {\n display: none;\n}\n#toggle-input:checked ~ .box .btn-text-on {\n display: block;\n}\n\n#toggle-input:checked ~ .box .btn {\n background: #2ecc71;\n border-bottom-color: #27ae60;\n}\n\n.lid {\n position: absolute;\n top: 40px;\n left: 20px;\n width: 80px;\n height: 8px;\n background: #34495e;\n border-radius: 4px;\n z-index: 4;\n transform-origin: left;\n transition: transform 0.3s ease;\n}\n\n#toggle-input:checked ~ .lid {\n transform: rotate(-110deg);\n}\n\n.monster {\n position: absolute;\n top: 50px;\n left: 40px;\n width: 60px;\n height: 60px;\n background: #2ecc71;\n border-radius: 25px 25px 5px 5px;\n z-index: 2;\n transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n display: flex;\n justify-content: center;\n padding-top: 10px;\n}\n\n#toggle-input:checked ~ .monster {\n top: -15px;\n}\n\n.monster-eye {\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n margin: 0 4px;\n position: relative;\n overflow: hidden;\n}\n\n.pupil {\n position: absolute;\n width: 6px;\n height: 6px;\n background: black;\n border-radius: 50%;\n left: 4px;\n top: 4px;\n animation: eyeMove 3s infinite alternate;\n}\n\n/* Arm Wrapper Logic */\n.arm-wrapper {\n position: absolute;\n width: 18px;\n height: 50px;\n left: 105px;\n top: 50px;\n z-index: 20; /* High z-index so it blocks clicks */\n cursor: pointer;\n pointer-events: none; /* Hidden by default */\n}\n\n.arm {\n width: 100%;\n height: 100%;\n background: #27ae60;\n border-radius: 10px;\n opacity: 0;\n}\n\n#toggle-input:checked ~ .arm-wrapper {\n pointer-events: auto; /* Becomes clickable when checked */\n animation: pushBack 0.6s 0.4s forwards;\n}\n\n#toggle-input:checked ~ .arm-wrapper .arm {\n animation: armFade 0.6s 0.4s forwards;\n}\n\n@keyframes pushBack {\n 0% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-65px);\n }\n 100% {\n transform: translateY(-65px);\n }\n}\n\n@keyframes armFade {\n 0% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n }\n 70% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes eyeMove {\n 0% {\n transform: translate(-2px, 0);\n }\n 100% {\n transform: translate(2px, 0);\n }\n}\n"}

smooth-chicken-92

👁 实时预览

📝 源代码