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

\n View 3D\n View 2D\n\n

\n\n","css":"/* Container settings */\n.switch-3d-cyan {\n --w: 110px;\n --h: 40px;\n --knob-size: 20px;\n --offset: 10px;\n\n /* --- COLORS --- */\n --cyan: #00ffff; /* The only accent color now */\n --white-glow: #ffffff;\n --bg-off: #1a2a2a; /* Dark Gray-ish */\n --bg-on: #0f0f1a; /* Dark Blue-ish */\n\n /* Calculations */\n --half-size: calc(var(--knob-size) / 2);\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 Track */\n.switch-track {\n position: absolute;\n inset: 0;\n background-color: var(--bg-off);\n border-radius: var(--h);\n border: 1px solid #444; /* Neutral border when OFF */\n transition: all 0.5s ease;\n overflow: hidden;\n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n}\n\n/* --- TEXT SETTINGS (White & Glowing) --- */\n.track-text {\n position: absolute;\n font-family: \"Arial\", sans-serif;\n font-size: 13px;\n font-weight: 800;\n color: var(--white-glow);\n text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n transition:\n opacity 0.4s ease,\n transform 0.4s ease;\n pointer-events: none;\n white-space: nowrap;\n}\n\n/* Position for \"View 3D\" (Visible initially) */\n.text-3d {\n left: 40px;\n opacity: 1;\n}\n\n/* Position for \"View 2D\" (Hidden initially) */\n.text-2d {\n left: 15px;\n opacity: 0;\n transform: translateX(-10px);\n}\n\n/* The 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 perspective: 1200px;\n pointer-events: none;\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n z-index: 2;\n}\n\n/* The Cube - ALWAYS SPINNING */\n.cube {\n width: 100%;\n height: 100%;\n position: relative;\n transform-style: preserve-3d;\n animation: spin 3s infinite linear;\n}\n\n/* Cube Faces - ALWAYS CYAN NOW */\n.face {\n position: absolute;\n width: 100%;\n height: 100%;\n /* Cyan tint */\n background: rgba(0, 255, 255, 0.1);\n /* Cyan border */\n border: 1px solid var(--cyan);\n /* Cyan glow */\n box-shadow:\n 0 0 4px var(--cyan),\n inset 0 0 4px var(--cyan);\n opacity: 0.8;\n backface-visibility: visible;\n transition: all 0.5s ease;\n}\n\n.front {\n transform: translateZ(var(--half-size));\n}\n.back {\n transform: rotateY(180deg) translateZ(var(--half-size));\n}\n.right {\n transform: rotateY(90deg) translateZ(var(--half-size));\n}\n.left {\n transform: rotateY(-90deg) translateZ(var(--half-size));\n}\n.top {\n transform: rotateX(90deg) translateZ(var(--half-size));\n}\n.bottom {\n transform: rotateX(-90deg) translateZ(var(--half-size));\n}\n\n/* --- CHECKED STATE --- */\n\n/* 1. Move knob */\n.switch-input:checked ~ .switch-track .switch-knob {\n transform: translateX(\n calc(var(--w) - var(--knob-size) - (var(--offset) * 2))\n );\n}\n\n/* 2. TEXT SWAP LOGIC */\n.switch-input:checked ~ .switch-track .text-3d {\n opacity: 0;\n transform: translateX(10px);\n}\n.switch-input:checked ~ .switch-track .text-2d {\n opacity: 1;\n transform: translateX(0);\n}\n\n/* 3. Change Background & Border */\n.switch-input:checked ~ .switch-track {\n background-color: var(--bg-on);\n border-color: var(--cyan); /* Border glows cyan only when ON */\n box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);\n}\n\n/* 4. Intensify Cube Glow when ON */\n.switch-input:checked ~ .switch-track .face {\n background: rgba(0, 255, 255, 0.15);\n box-shadow:\n 0 0 8px var(--cyan),\n inset 0 0 8px var(--cyan);\n}\n\n@keyframes spin {\n 0% {\n transform: rotateX(0deg) rotateY(0deg);\n }\n 100% {\n transform: rotateX(360deg) rotateY(360deg);\n }\n}\n"}

lucky-panther-31

👁 实时预览

📝 源代码