{"html":"

\n 1\n \n

\n 2\n \n

\n 3\n \n

\n 4\n \n

\n 5\n \n

\n","css":".radio-input {\n position: relative;\n}\n.radio-input-path {\n position: relative;\n width: 20em; /* width of the container holding the radiobutton and the label */\n aspect-ratio: 1;\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n}\n.radioContainer {\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 1em;\n}\n.radioContainer label {\n font-size: 0.85em;\n font-weight: 900;\n cursor: pointer;\n}\n.radio-input-path input[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n background: #000;\n transform-origin: bottom center;\n outline: none;\n}\n.radioContainer1 {\n left: 0;\n top: 25%;\n transform: rotateZ(-45deg);\n}\n.radioContainer5 {\n right: 0;\n top: 25%;\n transform: rotateZ(45deg);\n}\n.radioContainer2 {\n left: 15%;\n top: 5%;\n transform: rotateZ(-25deg);\n}\n.radioContainer4 {\n right: 15%;\n top: 5%;\n transform: rotateZ(25deg);\n}\n.radioContainer3 {\n left: 44%;\n top: -5%;\n transform: rotateZ(0deg);\n}\n\n/* The circular thing that rotates */\n.knob {\n width: 13em;\n aspect-ratio: 1;\n border-radius: 50%;\n top: 25%;\n left: 50%;\n position: absolute;\n border: 3px solid black;\n outline: 3px solid gray;\n background: #cfc9bd;\n overflow: hidden;\n transform: translateX(-50%);\n transform-origin: center center;\n transition: transform 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.center {\n height: 100%;\n width: 2.25em;\n position: relative;\n left: 50%;\n top: 50%;\n background-color: #cfc9bd;\n border-radius: 7px;\n outline: 1px solid rgba(255, 255, 255, 0.377);\n transform: translate(-50%, -50%);\n box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.474),\n -15px 0px 40px 5px rgba(128, 128, 128, 0.563),\n inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);\n transition: box-shadow 100ms linear;\n}\n.center::after {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 25px;\n background-color: black;\n left: 50%;\n top: 1%;\n transform: translateX(-50%);\n}\n\n/* Adjust rotateZ if the knob rotation is away from the label */\n.radio-input-path:has(.radio1:checked) ~ .knob {\n transform: translateX(-50%) rotateZ(-60deg);\n}\n.radio-input-path:has(.radio2:checked) ~ .knob {\n transform: translateX(-50%) rotateZ(-35deg);\n}\n.radio-input-path:has(.radio3:checked) ~ .knob {\n transform: translateX(-50%) rotateZ(0deg);\n}\n.radio-input-path:has(.radio4:checked) ~ .knob {\n transform: translateX(-50%) rotateZ(35deg);\n}\n.radio-input-path:has(.radio5:checked) ~ .knob {\n transform: translateX(-50%) rotateZ(60deg);\n}\n\n/* Dynamic shadow adustment based on the knob position */\n.radio-input-path:has(.radio1:checked) ~ .knob > .center {\n box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74),\n -15px 0px 40px 5px rgb(128, 128, 128),\n inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);\n}\n.radio-input-path:has(.radio2:checked) ~ .knob > .center {\n box-shadow: 15px 0px 35px rgba(255, 255, 255, 0.74),\n -15px 0px 40px 5px rgb(128, 128, 128, 0.574),\n inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);\n}\n.radio-input-path:has(.radio4:checked) ~ .knob > .center {\n box-shadow: 15px 0px 35px rgba(128, 128, 128, 0.63),\n -15px 0px 40px 5px rgba(255, 255, 255, 0.574),\n inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);\n}\n.radio-input-path:has(.radio5:checked) ~ .knob > .center {\n box-shadow: 15px 0px 35px rgb(128, 128, 128),\n -15px 0px 40px 5px rgba(255, 255, 255, 0.74),\n inset 0px 0px 4px 0px rgba(255, 255, 255, 0.226);\n}\n"}

silly-sheep-7

👁 实时预览

📝 源代码