{"html":"\n","css":".radio-form {\n display: block;\n margin: auto;\n max-width: 10em;\n position: relative;\n}\n\n.radio-form input {\n position: fixed;\n top: -1.5em;\n left: -1.5em;\n}\n\n.radio-form label {\n cursor: pointer;\n display: block;\n font-weight: bold;\n text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);\n transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);\n}\n\n.radio-form label:not(:last-of-type) {\n margin-bottom: 1.5em;\n}\n\n.radio-form label span {\n box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset;\n display: inline-block;\n margin-right: 0.5em;\n vertical-align: bottom;\n border-radius: 50%;\n width: 1.5em;\n height: 1.5em;\n transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);\n}\n\n.radio-form input:checked + label,\n.radio-form input:checked + label span {\n color: #255ff4;\n}\n\n.radio-form input:checked + label,\n.radio-form input:checked + label span {\n transition-delay: 0.4s;\n}\n\n.radio-form label span {\n transform: scale(1.2);\n}\n\n.radio-form .worm {\n top: 0.375em;\n left: 0.375em;\n position: absolute;\n}\n\n.radio-form .worm__segment {\n position: absolute;\n top: 0;\n left: 0;\n width: 0.75em;\n height: 0.75em;\n border-radius: 50%;\n transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);\n}\n\n.radio-form .worm__segment:before {\n animation-duration: 0.4s;\n animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);\n background: currentColor;\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n}\n\n.radio-form .worm__segment:first-child:before,\n.radio-form .worm__segment:last-child:before {\n box-shadow: 0 0 1em 0 currentColor;\n}\n\n@keyframes hop1 {\n from,\n to {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(-1.5em);\n }\n}\n\n@keyframes hop2 {\n from,\n to {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(-1.5em);\n }\n}\n\n@keyframes hop3 {\n from,\n to {\n transform: translateX(0);\n }\n\n 50% {\n transform: translateX(-1.5em);\n }\n}\n\n.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment {\n transform: translateY(0);\n}\n\n.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment:before {\n animation-name: hop1;\n}\n\n.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment {\n transform: translateY(3em);\n}\n\n.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment:before {\n animation-name: hop2;\n}\n\n.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment {\n transform: translateY(6em);\n}\n\n.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment:before {\n animation-name: hop3;\n}\n\n@media screen and (prefers-color-scheme: dark) {\n body {\n background: #17181c;\n color: #e3e4e8;\n }\n\n .radio-form input:checked + label,\n .radio-form input:checked + label span,\n .radio-form .worm__segment:before {\n color: #5583f6;\n }\n}\n"}

slippery-chicken-56

👁 实时预览

📝 源代码