{"html":"

\n \n \n \n ✓\n \n Silver\n \n\n \n \n \n ✓\n \n Gold\n \n\n \n \n \n ✓\n \n Platinum\n \n\n

\n","css":".glass-radio-group-vertical {\n position: relative;\n display: flex;\n flex-direction: column;\n background: rgba(255, 255, 255, 0);\n padding: 1.5rem 1.2rem;\n border: 0px solid rgb(255, 255, 255, 0);\n border-radius: 1rem;\n backdrop-filter: blur(16px);\n width: 230px;\n overflow: hidden;\n gap: 0.5rem;\n}\n\n.glass-radio-group-vertical input {\n display: none;\n}\n\n.glass-radio-group-vertical label {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.8rem;\n padding: 1rem 1.2rem;\n border-radius: 0.8rem;\n font-weight: 600;\n font-size: 1rem;\n color: #ccc;\n cursor: pointer;\n z-index: 2;\n transition: all 0.4s ease-in-out;\n overflow: hidden;\n}\n\n.label-text {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n.radio-indicator {\n width: 1.2rem;\n height: 1.2rem;\n border-radius: 50%;\n background: #999;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n color: white;\n box-shadow: 0 0 0 2px transparent;\n transition: all 0.3s ease-in-out;\n}\n\n.checkmark {\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s ease-in-out;\n}\n\n.glass-glider-vertical {\n position: absolute;\n left: 0;\n height: 56px;\n width: 80%;\n margin-left: 20px;\n border-radius: 0.8rem;\n z-index: 1;\n transition:\n transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1),\n background 0.5s ease-in-out,\n box-shadow 0.4s;\n}\n\n#glass-silver:checked ~ .glass-glider-vertical {\n transform: translateY(0%);\n background: linear-gradient(135deg, #00000050, #d1d1d1cc);\n box-shadow: 0 0 15px #00000077;\n}\n#glass-silver:checked + label {\n color: white;\n}\n#glass-silver:checked + label .radio-indicator {\n background: #c0c0c0;\n box-shadow:\n 0 0 0 2px #858585aa,\n 0 0 6px #6b6b6baa;\n}\n#glass-silver:checked + label .checkmark {\n opacity: 1;\n transform: scale(1);\n}\n\n#glass-gold:checked ~ .glass-glider-vertical {\n transform: translateY(115%);\n background: linear-gradient(135deg, #00000050, #ffbb00);\n box-shadow: 0 0 15px #00000077;\n}\n#glass-gold:checked + label {\n color: white;\n}\n#glass-gold:checked + label .radio-indicator {\n background: #ffc400;\n box-shadow:\n 0 0 0 2px #9c7300d3,\n 0 0 6px #695a00aa;\n}\n#glass-gold:checked + label .checkmark {\n opacity: 1;\n transform: scale(1);\n}\n\n#glass-platinum:checked ~ .glass-glider-vertical {\n transform: translateY(230%);\n background: linear-gradient(135deg, #00000050, #57d5ff);\n box-shadow: 0 0 15px #00000077;\n}\n#glass-platinum:checked + label {\n color: white;\n}\n#glass-platinum:checked + label .radio-indicator {\n background: #75c5ff;\n box-shadow:\n 0 0 0 2px #0095ff5b,\n 0 0 6px #0095ff57;\n}\n#glass-platinum:checked + label .checkmark {\n opacity: 1;\n transform: scale(1);\n}\n\n.glass-radio-group-vertical:has(#glass-silver:checked) {\n border-color: #c0c0c0;\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.2),\n inset 0 0 8px rgba(255, 255, 255, 0.4);\n}\n\n.glass-radio-group-vertical:has(#glass-gold:checked) {\n border-color: #ffbb00;\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.2),\n inset 0 0 8px rgba(255, 196, 0, 0.527);\n}\n\n.glass-radio-group-vertical:has(#glass-platinum:checked) {\n border-color: #57d5ff;\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.2),\n inset 0 0 8px rgba(0, 183, 255, 0.63);\n}\n"}

sweet-moth-39

👁 实时预览

📝 源代码