{"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 \n \n \n \n \n \n \n \n\n IntelliJ IDE\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n Vs Code\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Sublime Text\n \n \n

\n","css":".radio-input input {\n display: none;\n}\n\n.radio-input {\n --container_height: 300px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n border-radius: 10px;\n padding: 10px;\n gap: var(--padding);\n background-color: #fff;\n color: #000000;\n height: var(--container_height);\n overflow: hidden;\n border: 1px solid rgba(53, 52, 52, 0.226);\n}\n\n.radio-input label {\n width: 100%;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 4px;\n z-index: 1;\n font-weight: 600;\n font-size: 14px;\n height: 100%;\n}\n.radio-input label svg {\n width: 30px;\n height: 30px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: calc(var(--container_height) / 3 - 12px);\n z-index: 0;\n inset: 6px;\n border-radius: 10px;\n transition: 0.15s ease;\n}\n\n.radio-input label:has(input:checked) {\n color: #fff;\n}\n\n.radio-input label:has(input:checked) ~ .selection {\n display: inline-block;\n}\n.radio-input label:has(input:checked) svg {\n stroke: white;\n stroke-width: 10px;\n}\n\n.radio-input label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateY(calc(var(--container_height) * 0 / 3));\n background-color: #000000;\n}\n\n.radio-input label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateY(calc(var(--container_height) * 1 / 3));\n background-color: #1f9cf1;\n}\n\n.radio-input label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateY(calc(var(--container_height) * 2 / 3));\n background-color: #ff9801;\n}\n"}

green-wasp-49

👁 实时预览

📝 源代码