{"html":"\n \n

\n\n","css":"/* origami toggle */\n.origami-toggle {\n --paper-color: #ffffff;\n --shadow-dark: #d1d1d6;\n --shadow-light: #ffffff;\n --accent-stone: #ffffff;\n --accent-clay: #000000;\n\n position: relative;\n display: inline-block;\n width: 100px;\n height: 50px;\n cursor: pointer;\n}\n\n.origami-toggle .origami-input {\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n}\n.origami-toggle .origami-paper {\n position: absolute;\n inset: 0;\n background-color: var(--paper-color);\n border-radius: 12px;\n box-shadow:\n 6px 6px 12px var(--shadow-dark),\n -6px -6px 12px var(--shadow-light);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n.origami-toggle .origami-fold {\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: var(--accent-clay);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n transform: skewX(-15deg);\n opacity: 0;\n}\n.origami-toggle .origami-knob {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 40px;\n height: 40px;\n background-color: var(--paper-color);\n border-radius: 8px;\n box-shadow:\n 3px 3px 6px var(--shadow-dark),\n -3px -3px 6px var(--shadow-light);\n transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 2;\n}\n.origami-toggle .origami-texture {\n width: 4px;\n height: 16px;\n background: var(--shadow-dark);\n border-radius: 10px;\n box-shadow:\n 8px 0 var(--shadow-dark),\n -8px 0 var(--shadow-dark);\n transition: all 0.4s ease;\n}\n.origami-toggle .origami-input:checked + .origami-paper {\n box-shadow:\n inset 4px 4px 8px rgba(0, 0, 0, 0.3),\n 0 8px 20px rgba(0, 0, 0, 0.2);\n}\n\n.origami-toggle .origami-input:checked + .origami-paper .origami-fold {\n left: 0;\n transform: skewX(0deg);\n opacity: 1;\n}\n\n.origami-toggle .origami-input:checked + .origami-paper .origami-knob {\n left: calc(100% - 45px);\n background-color: var(--accent-stone);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);\n transform: rotate(90deg);\n}\n\n.origami-toggle\n .origami-input:checked\n + .origami-paper\n .origami-knob\n .origami-texture {\n background: #000000;\n box-shadow:\n 8px 0 #000000,\n -8px 0 #000000;\n height: 4px;\n}\n.origami-toggle:active .origami-knob {\n transform: scale(0.85);\n}\n"}

soft-kangaroo-60

👁 实时预览

📝 源代码