{"html":"

\n \n \n

\n \n

\n","css":".uiverse-wrapper {\n --pill-width: 200px;\n --pill-height: 70px;\n --knob-size: 90px;\n --accent: #c56a3a;\n\n padding: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.pill-toggle {\n position: relative;\n display: inline-block;\n width: var(--pill-width);\n height: var(--pill-height);\n}\n.pill-toggle input {\n display: none;\n}\n.track {\n width: 100%;\n height: 100%;\n background: #d0d0d0;\n border-radius: 999px;\n box-shadow:\n inset 0 2px 6px rgba(0, 0, 0, 0.15),\n inset 0 4px 12px rgba(0, 0, 0, 0.05),\n 0 1px 0 rgba(255, 255, 255, 0.4);\n position: relative;\n transition: background 0.4s ease;\n}\n.pill {\n position: absolute;\n top: -8.8%;\n left: -5%;\n width: var(--knob-size);\n height: 110%;\n border-radius: 999px;\n cursor: pointer;\n\n background: linear-gradient(to bottom, #e6e6e6, #cfcfcf);\n\n box-shadow:\n 0 1px 0 var(--accent),\n 0 8px 15px rgba(0, 0, 0, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.6);\n\n transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 2;\n}\n\n.pill-surface {\n position: absolute;\n inset: 5%;\n border-radius: 999px;\n background: linear-gradient(135deg, #f4f4f4 0%, #dedede 45%, #cfcfcf 100%);\n\n box-shadow:\n inset 0 -1px 2px rgba(0, 0, 0, 0.1),\n inset 0 1px 2px rgba(255, 255, 255, 0.8);\n}\n\n.pill-toggle:hover .pill {\n transform: translateY(-1px);\n\n box-shadow:\n 0 4px 0 var(--accent),\n 0 15px 25px rgba(0, 0, 0, 0.1),\n inset 0 1px 0 rgba(255, 255, 255, 0.6);\n}\n\n.pill-toggle input:active + .track .pill {\n transform: translateY(2px);\n box-shadow:\n 0 2px 0 var(--accent),\n 0 2px 6px rgba(0, 0, 0, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.6);\n transition: all 0.1s ease;\n}\n.pill-toggle input:checked + .track .pill {\n left: calc(105% - var(--knob-size));\n}\n\n.pill-toggle input:checked + .track {\n background: #e4e4e4;\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);\n}\n"}

tasty-horse-41

👁 实时预览

📝 源代码