{"html":"

\n \n Option 1\n

\n \n Option 2\n

\n \n Option 3\n

\n","css":".radio-group {\n display: flex;\n gap: 0;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(20px);\n padding: 4px;\n border-radius: 25px;\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.15),\n inset 0 1px 0 rgba(255, 255, 255, 0.3);\n border: 1px solid rgba(255, 255, 255, 0.3);\n position: relative;\n animation: slide-in 0.6s ease-out;\n width: 280px;\n height: 40px;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: scale(0.9);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Indicador deslizante de fondo */\n.slider {\n position: absolute;\n top: 4px;\n bottom: 4px;\n background: #fff;\n border-radius: 25px;\n transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-shadow:\n 0 3px 12px rgba(0, 0, 0, 0.15),\n 0 1px 4px rgba(0, 0, 0, 0.1);\n z-index: 0;\n}\n\n.radio-option {\n position: relative;\n z-index: 1;\n flex: 1;\n}\n\n.radio-option input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.radio-label {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: 0 16px;\n color: rgba(255, 255, 255, 0.8);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n user-select: none;\n border-radius: 25px;\n position: relative;\n white-space: nowrap;\n}\n\n.radio-option input[type=\"radio\"]:checked + .radio-label {\n color: #667eea;\n text-shadow: none;\n}\n\n.radio-label:hover {\n color: rgba(255, 255, 255, 0.9);\n}\n\n/* Efecto de brillo al pasar el mouse */\n.radio-label::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50px;\n background: rgba(255, 255, 255, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.radio-label:hover::before {\n opacity: 1;\n}\n\n/* Animación de entrada escalonada */\n.radio-option {\n animation: fade-in 0.5s ease-out backwards;\n}\n\n.radio-option:nth-child(1) {\n animation-delay: 0.1s;\n}\n.radio-option:nth-child(2) {\n animation-delay: 0.2s;\n}\n.radio-option:nth-child(3) {\n animation-delay: 0.3s;\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Ajuste automático del slider */\n.radio-group:has(#option1:checked) .slider {\n left: 4px;\n width: calc(33.333% - 2.67px);\n}\n\n.radio-group:has(#option2:checked) .slider {\n left: calc(33.333% + 1.33px);\n width: calc(33.333% - 2.67px);\n}\n\n.radio-group:has(#option3:checked) .slider {\n left: calc(66.666% - 1.33px);\n width: calc(33.333% - 2.67px);\n}\n\n/* Efecto de pulso en el slider */\n@keyframes pulse {\n 0% {\n box-shadow:\n 0 3px 12px rgba(0, 0, 0, 0.15),\n 0 1px 4px rgba(0, 0, 0, 0.1);\n }\n 50% {\n box-shadow:\n 0 5px 20px rgba(102, 126, 234, 0.3),\n 0 2px 8px rgba(0, 0, 0, 0.15);\n }\n 100% {\n box-shadow:\n 0 3px 12px rgba(0, 0, 0, 0.15),\n 0 1px 4px rgba(0, 0, 0, 0.1);\n }\n}\n\n.radio-option input[type=\"radio\"]:checked ~ .slider {\n animation: pulse 0.6s ease-out;\n}\n\n/* Brillo decorativo en el contenedor */\n.radio-group::before {\n content: \"\";\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n background: linear-gradient(\n 45deg,\n transparent,\n rgba(255, 255, 255, 0.1),\n transparent\n );\n border-radius: 50px;\n z-index: -1;\n animation: shine 3s linear infinite;\n opacity: 0;\n}\n\n@keyframes shine {\n 0% {\n transform: translateX(-100%) rotate(45deg);\n }\n 100% {\n transform: translateX(100%) rotate(45deg);\n }\n}\n"}

orange-badger-71

👁 实时预览

📝 源代码