{"html":"

\n \n\n \n

\n \n\n

\n ACTIVATED\n ACTIVATE\n

\n\n

\n \n\n","css":".post888-mecha {\n display: inline-block;\n font-family: system-ui, sans-serif;\n}\n\n/* unsichtbarer Toggle */\n.post888-mecha__toggle {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Rahmen / Bühne */\n.post888-mecha__frame {\n position: relative;\n display: inline-block;\n padding: 24px 28px 26px 28px;\n border-radius: 18px;\n background: linear-gradient(180deg, #0a0e19, #05060a);\n box-shadow:\n 0 12px 32px rgba(0, 0, 0, 0.65),\n inset 0 0 0 1px rgba(125, 249, 255, 0.08);\n cursor: pointer;\n user-select: none;\n}\n\n/* ---------------- BUTTON ---------------- */\n.post888-mecha__button {\n position: relative;\n width: 210px;\n height: 64px;\n border-radius: 14px;\n background: linear-gradient(180deg, #1b2134, #0e1324);\n box-shadow:\n inset 0 2px 0 rgba(255, 255, 255, 0.06),\n inset 0 -8px 14px rgba(0, 0, 0, 0.9),\n 0 10px 0 #03040a,\n 0 18px 26px rgba(0, 0, 0, 0.7);\n transform: translateY(0);\n transition:\n transform 0.18s ease,\n box-shadow 0.18s ease,\n filter 0.18s ease;\n}\n\n.post888-mecha__button-face {\n position: absolute;\n inset: 6px;\n border-radius: 10px;\n background: radial-gradient(\n 120px circle at 20% 20%,\n rgba(125, 249, 255, 0.18),\n transparent 50%\n ),\n linear-gradient(180deg, #11162b, #0a0f1f);\n box-shadow:\n inset 0 0 0 1px rgba(125, 249, 255, 0.18),\n inset 0 0 18px rgba(88, 199, 255, 0.12);\n display: grid;\n place-items: center;\n overflow: hidden;\n}\n\n/* Textzustände */\n.post888-mecha__text {\n position: absolute;\n font-weight: 700;\n letter-spacing: 0.22em;\n font-size: 0.9rem;\n text-transform: uppercase;\n transition:\n opacity 0.2s ease,\n transform 0.2s ease;\n}\n\n.post888-mecha__text--off {\n opacity: 1;\n transform: translateY(0);\n color: #dbeafe;\n text-shadow: 0 0 10px rgba(125, 249, 255, 0.35);\n}\n\n.post888-mecha__text--on {\n opacity: 0;\n transform: translateY(8px);\n color: #a7f3d0;\n text-shadow: 0 0 12px rgba(34, 197, 94, 0.55);\n}\n\n/* Hover: leichter Druck, bevor Arm greift */\n.post888-mecha__frame:hover .post888-mecha__button {\n filter: brightness(1.05);\n}\n\n/* ---------------- ARM ---------------- */\n.post888-mecha__arm {\n position: absolute;\n left: -3px;\n top: -2px;\n width: 140px;\n height: 110px;\n transform-origin: 24px 24px;\n transform: rotate(-17deg);\n transition: transform 0.35s ease;\n pointer-events: none;\n}\n\n/* Basis */\n.post888-mecha__arm-base {\n position: absolute;\n left: 10px;\n top: 14px;\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: linear-gradient(180deg, #1d2438, #0b1020);\n box-shadow:\n inset 0 0 0 1px rgba(255, 255, 255, 0.06),\n 0 6px 12px rgba(0, 0, 0, 0.6);\n}\n\n/* Gelenk */\n.post888-mecha__arm-joint {\n position: absolute;\n left: 36px;\n top: 28px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: radial-gradient(circle, #9fb3d9, #1b243b);\n box-shadow: 0 0 8px rgba(125, 249, 255, 0.25);\n}\n\n/* Vorderarm */\n.post888-mecha__arm-fore {\n position: absolute;\n left: 44px;\n top: 32px;\n width: 62px;\n height: 12px;\n border-radius: 999px;\n background: linear-gradient(90deg, #232b44, #0f162b);\n box-shadow:\n inset 0 0 0 1px rgba(125, 249, 255, 0.12),\n 0 4px 8px rgba(0, 0, 0, 0.6);\n}\n\n/* Klaue */\n.post888-mecha__claw {\n position: absolute;\n left: 96px;\n top: 20px;\n width: 34px;\n height: 34px;\n transform-origin: 0 50%;\n transition: transform 0.25s ease;\n}\n\n/* Finger */\n.post888-mecha__claw-finger {\n position: absolute;\n width: 28px;\n height: 8px;\n border-radius: 999px;\n background: linear-gradient(180deg, #2a3552, #10172c);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);\n transform-origin: 2px 50%;\n transition: transform 0.25s ease;\n}\n\n.post888-mecha__claw-finger--top {\n top: 5px;\n transform: rotate(22deg);\n}\n\n.post888-mecha__claw-finger--bottom {\n bottom: 4px;\n transform: rotate(-20deg);\n}\n\n/* ---------------- LED ---------------- */\n.post888-mecha__led {\n position: absolute;\n right: 14px;\n top: 12px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: radial-gradient(circle, #334155, #0b1020);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);\n transition:\n background 0.2s ease,\n box-shadow 0.2s ease;\n}\n\n/* ---------------- INTERACTION ---------------- */\n/* Hover: Arm nähert sich + Klaue öffnet */\n.post888-mecha__frame:hover .post888-mecha__arm {\n transform: rotate(2deg) translateX(6px);\n}\n.post888-mecha__frame:hover .post888-mecha__claw {\n transform: translateX(6px);\n}\n.post888-mecha__frame:hover .post888-mecha__claw-finger--top {\n transform: rotate(6deg);\n}\n.post888-mecha__frame:hover .post888-mecha__claw-finger--bottom {\n transform: rotate(-6deg);\n}\n\n/* Toggle an: Arm greift + Button gedrückt */\n.post888-mecha__toggle:checked + .post888-mecha__frame .post888-mecha__arm {\n transform: rotate(10deg) translateX(12px) translateY(6px);\n}\n.post888-mecha__toggle:checked\n + .post888-mecha__frame\n .post888-mecha__claw-finger--top {\n transform: rotate(34deg);\n}\n.post888-mecha__toggle:checked\n + .post888-mecha__frame\n .post888-mecha__claw-finger--bottom {\n transform: rotate(-34deg);\n}\n\n.post888-mecha__toggle:checked + .post888-mecha__frame .post888-mecha__button {\n transform: translateY(6px);\n box-shadow:\n inset 0 2px 0 rgba(255, 255, 255, 0.04),\n inset 0 -6px 10px rgba(0, 0, 0, 0.9),\n 0 4px 0 #03040a,\n 0 10px 18px rgba(0, 0, 0, 0.8);\n}\n\n/* Text switch */\n.post888-mecha__toggle:checked\n + .post888-mecha__frame\n .post888-mecha__text--off {\n opacity: 0;\n transform: translateY(-8px);\n}\n.post888-mecha__toggle:checked\n + .post888-mecha__frame\n .post888-mecha__text--on {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* LED an */\n.post888-mecha__toggle:checked + .post888-mecha__frame .post888-mecha__led {\n background: radial-gradient(circle, #86efac, #16a34a);\n box-shadow:\n 0 0 8px rgba(34, 197, 94, 0.9),\n 0 0 16px rgba(34, 197, 94, 0.55);\n}\n\n/* Reduced Motion */\n@media (prefers-reduced-motion: reduce) {\n .post888-mecha__button,\n .post888-mecha__arm,\n .post888-mecha__claw,\n .post888-mecha__claw-finger,\n .post888-mecha__text,\n .post888-mecha__led {\n transition: none;\n }\n}\n"}

honest-rat-17

👁 实时预览

📝 源代码