{"html":"

\n \n \n \n Helios Blue\n \n \n \n \n Cygnus Magenta\n \n \n \n \n Orion Lime\n \n

\n","css":".fullscreen-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 100%;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n Arial, sans-serif;\n padding: 20px 0;\n box-sizing: border-box;\n}\n\n.radio-group-container {\n background-color: rgba(26, 27, 40, 0.7);\n padding: 20px 35px;\n border-radius: 20px;\n border: 1px solid rgba(255, 255, 255, 0.055);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n width: 90%;\n max-width: 280px;\n transition: all 0.3s ease;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n margin: 30px 0;\n cursor: pointer;\n position: relative;\n user-select: none;\n}\n\n.radio-input {\n display: none;\n}\n\n.radio-custom {\n width: 22px;\n height: 22px;\n background-color: transparent;\n border: 2px solid #5c5e79;\n border-radius: 50%;\n margin-right: 18px;\n position: relative;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.radio-custom::before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n background: #8a8b9f;\n border-radius: 50%;\n transform: scale(0);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.radio-custom::after {\n content: \"\";\n position: absolute;\n width: 34px;\n height: 34px;\n border: 2px solid transparent;\n border-radius: 50%;\n border-top-color: #00a6ff;\n opacity: 0;\n transform: scale(0.8);\n transition: all 0.4s ease;\n}\n\n.radio-text {\n font-size: 1.1rem;\n font-weight: 500;\n color: #c1c3d9;\n transition: color 0.3s ease;\n}\n\n.radio-label:hover .radio-input:not(:checked) + .radio-custom {\n transform: scale(1.1);\n border-color: #8a8daf;\n}\n\n.radio-label:hover .radio-text {\n color: #e2e4f4;\n}\n\n.radio-input:checked + .radio-custom {\n border-color: #00a6ff;\n transform: scale(0.9);\n}\n\n.radio-input:checked + .radio-custom::before {\n transform: scale(1);\n background-color: #00a6ff;\n}\n\n.radio-input:checked + .radio-custom::after {\n opacity: 1;\n transform: scale(1.3);\n animation: orbit 2.5s infinite linear;\n box-shadow:\n 0 0 30px #00a6ff,\n 0 0 80px rgba(0, 166, 255, 0.2);\n}\n\n.radio-input:checked ~ .radio-text {\n color: #ffffff;\n font-weight: 700;\n}\n\n.radio-label:nth-child(2) .radio-input:checked + .radio-custom {\n border-color: #e900ff;\n box-shadow: none;\n}\n.radio-label:nth-child(2) .radio-input:checked + .radio-custom::before {\n background-color: #e900ff;\n}\n.radio-label:nth-child(2) .radio-input:checked + .radio-custom::after {\n border-top-color: #e900ff;\n box-shadow:\n 0 0 30px #e900ff,\n 0 0 80px rgba(233, 0, 255, 0.2);\n}\n.radio-label:nth-child(2) .radio-input:checked ~ .radio-text {\n color: #ffffff;\n}\n\n.radio-label:nth-child(3) .radio-input:checked + .radio-custom {\n border-color: #00ffc2;\n box-shadow: none;\n}\n.radio-label:nth-child(3) .radio-input:checked + .radio-custom::before {\n background-color: #00ffc2;\n}\n.radio-label:nth-child(3) .radio-input:checked + .radio-custom::after {\n border-top-color: #00ffc2;\n box-shadow:\n 0 0 30px #00ffc2,\n 0 0 80px rgba(0, 255, 194, 0.2);\n}\n.radio-label:nth-child(3) .radio-input:checked ~ .radio-text {\n color: #ffffff;\n}\n\n@keyframes orbit {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Media Query for Mobile Responsiveness */\n@media (max-width: 400px) {\n .radio-group-container {\n padding: 15px 25px;\n }\n\n .radio-label {\n margin: 25px 0;\n }\n\n .radio-text {\n font-size: 1rem;\n }\n}\n"}

good-chicken-7

👁 实时预览

📝 源代码