{"html":"\n \n

\n OFF\n ON\n

\n \n\n","css":".finance-toggle {\n /* sizing tokens */\n --w: 100px;\n --h: 50px;\n --gap: 4px;\n --thumb: calc(var(--h) - var(--gap) * 2);\n\n /* colour tokens */\n --track-off: #343434;\n --track-gradient-1: #8a5cff;\n --track-gradient-2: #0078ff;\n --track-gradient-3: #00eaff;\n --thumb-bg: #ffffff;\n --label-col: #d0d0d0;\n\n position: relative;\n display: inline-block;\n width: var(--w);\n height: var(--h);\n border-radius: calc(var(--h) / 2);\n cursor: pointer;\n user-select: none;\n}\n\n/* invisible but accessible checkbox */\n.finance-toggle__input {\n position: absolute;\n inset: 0;\n margin: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n}\n\n/* track */\n.finance-toggle__track {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background: var(--track-off);\n overflow: hidden;\n box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.35);\n}\n\n.finance-toggle__track::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 130deg,\n var(--track-gradient-1),\n var(--track-gradient-2),\n var(--track-gradient-3)\n );\n background-size: 250% 250%;\n opacity: 0;\n transition: opacity 0.35s ease;\n}\n\n/* labels */\n.finance-toggle__label {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 1px;\n color: var(--label-col);\n text-shadow: 0 1px 0 #000;\n pointer-events: none;\n transition: opacity 0.25s ease;\n}\n.finance-toggle__label--off {\n left: 14px;\n opacity: 1;\n}\n.finance-toggle__label--on {\n right: 14px;\n opacity: 0;\n}\n\n/* thumb */\n.finance-toggle__thumb {\n position: absolute;\n top: var(--gap);\n left: var(--gap);\n width: var(--thumb);\n height: var(--thumb);\n border-radius: 50%;\n background: var(--thumb-bg);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);\n transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.finance-toggle__thumb::after {\n content: \"\";\n position: absolute;\n inset: 4px;\n border-radius: 50%;\n background: #f5f5f5;\n box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15);\n}\n\n/* animation */\n@keyframes gradientMove {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n\n/* checked state */\n.finance-toggle__input:checked + .finance-toggle__track::after {\n opacity: 1;\n animation: gradientMove 6s ease infinite;\n}\n\n.finance-toggle__input:checked ~ .finance-toggle__thumb {\n left: calc(100% - var(--thumb) - var(--gap));\n}\n\n.finance-toggle__input:checked\n + .finance-toggle__track\n .finance-toggle__label--on {\n opacity: 1;\n}\n.finance-toggle__input:checked\n + .finance-toggle__track\n .finance-toggle__label--off {\n opacity: 0;\n}\n\n/* focus ring (keyboard) */\n.finance-toggle__input:focus-visible + .finance-toggle__track {\n outline: 3px solid var(--track-gradient-3);\n outline-offset: 3px;\n}\n"}

unlucky-lion-52

👁 实时预览

📝 源代码