{"html":"

\n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n

\n","css":".toggle-cont {\n --primary: #54a8fc;\n --light: #d9d9d9;\n --dark: #121212;\n --gray: #414344;\n\n position: relative;\n z-index: 10;\n\n width: fit-content;\n height: 50px;\n\n border-radius: 9999px;\n}\n\n.toggle-cont .toggle-input {\n display: none;\n}\n\n.toggle-cont .toggle-label {\n --gap: 5px;\n --width: 50px;\n\n cursor: pointer;\n\n position: relative;\n display: inline-block;\n\n padding: 0.5rem;\n width: calc((var(--width) + var(--gap)) * 2);\n height: 100%;\n background-color: var(--dark);\n\n border: 1px solid #777777;\n border-bottom: 0;\n\n border-radius: 9999px;\n box-sizing: content-box;\n transition: all 0.3s ease-in-out;\n}\n.toggle-label::before {\n content: \"\";\n\n position: absolute;\n z-index: -10;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: calc(100% + 1.5rem);\n height: calc(100% + 1.5rem);\n background-color: var(--gray);\n\n border: 1px solid #777777;\n border-bottom: 0;\n border-radius: 9999px;\n\n transition: all 0.3s ease-in-out;\n}\n.toggle-label::after {\n content: \"\";\n\n position: absolute;\n z-index: -10;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 100%;\n height: 100%;\n background-image: radial-gradient(\n circle at 50% -100%,\n rgb(58, 155, 252) 0%,\n rgba(12, 12, 12, 1) 80%\n );\n\n border-radius: 9999px;\n}\n\n.toggle-cont .toggle-label .cont-icon {\n position: relative;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n width: var(--width);\n height: 50px;\n background-image: radial-gradient(\n circle at 50% 0%,\n #666666 0%,\n var(--gray) 100%\n );\n\n border: 1px solid #aaaaaa;\n border-bottom: 0;\n border-radius: 9999px;\n box-shadow: inset 0 -0.15rem 0.15rem var(--primary),\n inset 0 0 0.5rem 0.75rem var(--second);\n\n transition: transform 0.3s ease-in-out;\n}\n\n.cont-icon {\n overflow: clip;\n position: relative;\n}\n\n.cont-icon .sparkle {\n position: absolute;\n top: 50%;\n left: 50%;\n\n display: block;\n\n width: calc(var(--width) * 1px);\n aspect-ratio: 1;\n background-color: var(--light);\n\n border-radius: 50%;\n transform-origin: 50% 50%;\n rotate: calc(1deg * var(--deg));\n transform: translate(-50%, -50%);\n animation: sparkle calc(100s / var(--duration)) linear\n calc(0s / var(--duration)) infinite;\n}\n\n@keyframes sparkle {\n to {\n width: calc(var(--width) * 0.5px);\n transform: translate(2000%, -50%);\n }\n}\n\n.cont-icon .icon {\n width: 1.1rem;\n fill: var(--light);\n}\n\n.toggle-cont:has(.toggle-input:checked) {\n --checked: true;\n}\n\n@container style(--checked: true) {\n .toggle-cont .toggle-label {\n background-color: #41434400;\n\n border: 1px solid #3d6970;\n border-bottom: 0;\n }\n\n .toggle-cont .toggle-label::before {\n box-shadow: 0 1rem 2.5rem -2rem #0080ff;\n }\n\n .toggle-cont .toggle-label .cont-icon {\n overflow: visible;\n\n background-image: radial-gradient(\n circle at 50% 0%,\n #045ab1 0%,\n var(--primary) 100%\n );\n\n border: 1px solid var(--primary);\n border-bottom: 0;\n\n transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);\n }\n\n .toggle-cont .toggle-label .cont-icon .sparkle {\n z-index: -10;\n\n width: calc(var(--width) * 1.5px);\n background-color: #acacac;\n\n animation: sparkle calc(100s / var(--duration)) linear\n calc(10s / var(--duration)) infinite;\n }\n\n @keyframes sparkle {\n to {\n width: calc(var(--width) * 1px);\n transform: translate(5000%, -50%);\n }\n }\n}\n"}

nasty-moth-15

👁 实时预览

📝 源代码