{"html":"\n \n\n

\n\n

\n\n","css":"/* --- MAIN SWITCH CONTAINER --- */\n.switch-food {\n --w: 120px;\n --h: 60px;\n --knob-size: 50px;\n --offset: 5px;\n --bg-burger: #ffecd2;\n --bg-fries: #fff5e6;\n\n position: relative;\n display: inline-block;\n width: var(--w);\n height: var(--h);\n cursor: pointer;\n}\n\n.switch-input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The Background Track */\n.switch-track {\n position: absolute;\n inset: 0;\n background-color: var(--bg-burger);\n border: 3px solid #333;\n border-radius: 60px;\n transition: background-color 0.4s;\n overflow: hidden;\n}\n\n/* The Moving Knob Wrapper */\n.switch-knob {\n position: absolute;\n top: var(--offset);\n left: var(--offset);\n width: var(--knob-size);\n height: var(--knob-size);\n transition: transform 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* ===========================\n 1. THE BURGER (2D DOODLE)\n =========================== */\n.burger-container {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n transition:\n transform 0.4s ease,\n opacity 0.3s ease;\n z-index: 2;\n}\n\n.bun-top {\n width: 36px;\n height: 16px;\n background: #ffa64d;\n border: 2px solid #333;\n border-bottom: none;\n border-radius: 20px 20px 0 0;\n position: relative;\n z-index: 4;\n}\n.seeds {\n position: absolute;\n width: 2px;\n height: 2px;\n background: #333;\n top: 6px;\n left: 10px;\n box-shadow:\n 12px 0 #333,\n 6px 4px #333;\n border-radius: 50%;\n}\n.lettuce {\n width: 40px;\n height: 6px;\n background: #8cd65e;\n border: 2px solid #333;\n border-radius: 10px;\n margin-top: -2px;\n z-index: 3;\n}\n.patty {\n width: 36px;\n height: 8px;\n background: #8b4513;\n border: 2px solid #333;\n border-radius: 4px;\n margin-top: -2px;\n z-index: 2;\n}\n.bun-bottom {\n width: 36px;\n height: 10px;\n background: #ffa64d;\n border: 2px solid #333;\n border-radius: 0 0 10px 10px;\n margin-top: -2px;\n z-index: 1;\n}\n\n/* ===========================\n 2. THE FRIES (3D)\n =========================== */\n.fries-container {\n position: absolute;\n width: 40px;\n height: 40px;\n perspective: 600px;\n opacity: 0;\n transform: scale(0);\n transition:\n transform 0.4s ease,\n opacity 0.3s ease;\n z-index: 1;\n}\n\n.fry-box {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(30deg);\n}\n\n/* The Red Box Faces */\n.box-face {\n position: absolute;\n border: 2px solid #333;\n background: #ff4757;\n backface-visibility: visible;\n}\n.box-face.front {\n width: 30px;\n height: 35px;\n transform: translateZ(15px);\n left: 5px;\n top: 5px;\n}\n.box-face.back {\n width: 30px;\n height: 35px;\n transform: rotateY(180deg) translateZ(15px);\n left: 5px;\n top: 5px;\n}\n.box-face.right {\n width: 30px;\n height: 35px;\n transform: rotateY(90deg) translateZ(15px);\n left: 5px;\n top: 5px;\n}\n.box-face.left {\n width: 30px;\n height: 35px;\n transform: rotateY(-90deg) translateZ(15px);\n left: 5px;\n top: 5px;\n}\n.box-face.bottom {\n width: 30px;\n height: 30px;\n transform: rotateX(-90deg) translateZ(30px);\n left: 5px;\n}\n\n/* The Yellow Fries sticking out */\n.fry {\n position: absolute;\n width: 6px;\n height: 25px;\n background: #ffd32a;\n border: 2px solid #333;\n top: -10px;\n transform-origin: bottom;\n border-radius: 2px;\n}\n\n/* Positioning all the fries (Scatter them in 3D) */\n/* Front Left */\n.fry.f1 {\n left: 8px;\n transform: translateZ(10px) rotateZ(-10deg);\n}\n/* Center Tall */\n.fry.f2 {\n left: 16px;\n transform: translateZ(5px) rotateZ(0deg);\n height: 32px;\n top: -17px;\n}\n/* Back Center */\n.fry.f3 {\n left: 12px;\n transform: translateZ(-5px) rotateZ(8deg);\n}\n/* Front Right */\n.fry.f4 {\n left: 22px;\n transform: translateZ(10px) rotateZ(10deg);\n height: 20px;\n}\n/* Back Left */\n.fry.f5 {\n left: 8px;\n transform: translateZ(-8px) rotateZ(-15deg);\n height: 28px;\n top: -12px;\n}\n/* Middle Right */\n.fry.f6 {\n left: 24px;\n transform: translateZ(0px) rotateZ(5deg);\n height: 24px;\n}\n/* Middle Center */\n.fry.f7 {\n left: 14px;\n transform: translateZ(12px) rotateZ(-5deg);\n height: 26px;\n top: -8px;\n}\n\n/* ===========================\n ANIMATIONS\n =========================== */\n\n.switch-input:checked ~ .switch-track .switch-knob {\n transform: translateX(\n calc(var(--w) - var(--knob-size) - (var(--offset) * 2))\n );\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch-input:checked ~ .switch-track .burger-container {\n opacity: 0;\n transform: scale(0) rotate(-90deg);\n}\n\n.switch-input:checked ~ .switch-track .fries-container {\n opacity: 1;\n transform: scale(1);\n}\n\n.switch-input:checked ~ .switch-track .fry-box {\n animation: spinFries 3s infinite linear;\n}\n\n.switch-input:checked ~ .switch-track {\n background-color: var(--bg-fries);\n}\n\n@keyframes spinFries {\n 0% {\n transform: rotateX(-20deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(-20deg) rotateY(360deg);\n }\n}\n"}

purple-otter-17

👁 实时预览

📝 源代码