{"html":"

\n Click\n Me\n to\n And so on ..\n

\n","css":".container {\n --s: 1em; /* control the size */\n --g: 10px; /* the gap */\n --c: #009688; /* the active color */\n\n display: grid;\n grid-auto-rows: 1fr;\n gap: var(--g);\n position: relative;\n}\n.container:before {\n content: \"\";\n position: absolute;\n height: calc(var(--s) / 2);\n left: calc(var(--s) / 4 + var(--_x, 0px));\n top: calc(var(--s) / 4);\n background: var(--c);\n border-radius: 50%;\n aspect-ratio: 1;\n transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;\n}\n.container label {\n display: inline-flex;\n line-height: var(--s);\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n.container input {\n height: var(--s);\n aspect-ratio: 1;\n border: calc(var(--s) / 8) solid var(--_c, #939393);\n border-radius: 50%;\n outline-offset: calc(var(--s) / 10);\n padding: calc(var(--s) / 8);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n font-size: inherit;\n margin: 0;\n transition: 0.3s;\n}\n.container input:checked {\n --_c: var(--c);\n}\n.container:not(:has(input:checked)):before {\n --_i: -1;\n opacity: 0;\n}\n.container:has(input:checked):before {\n opacity: 1;\n transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));\n}\n.container:has(label:nth-child(1) input:checked):before {\n --_i: 0;\n --_x: 0.02px;\n}\n.container:has(label:nth-child(2) input:checked):before {\n --_i: 1;\n --_x: 0.04px;\n}\n.container:has(label:nth-child(3) input:checked):before {\n --_i: 2;\n --_x: 0.06px;\n}\n.container:has(label:nth-child(4) input:checked):before {\n --_i: 3;\n --_x: 0.08px;\n}\n.container:has(label:nth-child(5) input:checked):before {\n --_i: 4;\n --_x: 0.1px;\n}\n/* and so on ..*/\n\n.container input:disabled {\n background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;\n opacity: 0.5;\n cursor: not-allowed;\n}\n@media print {\n input[type=\"radio\"] {\n -webkit-appearance: auto;\n -moz-appearance: auto;\n appearance: auto;\n background: none;\n }\n}\n@supports not selector(:has(*)) {\n .container:before {\n display: none;\n }\n .container input:checked {\n --_c: var(--c);\n background: var(--c) content-box;\n }\n}\n"}

wise-snake-15

👁 实时预览

📝 源代码