{"html":"

\n \n Free\n \n Basic\n \n Premium\n

\n","css":".pill-radio-container {\n --main-color: #ff6ec4;\n --secondary-color: #7873f5;\n --text-color: #ddd;\n --pill-bg: #1a1a1a;\n --total-options: 8;\n\n display: flex;\n position: relative;\n background: var(--pill-bg);\n border-radius: 3rem;\n padding: 0.5rem;\n gap: 1rem;\n box-shadow: 0 0 20px #000 inset;\n width: fit-content;\n}\n\n.pill-radio-container input {\n display: none;\n}\n\n.pill-radio-container label {\n position: relative;\n padding: 0.6rem 1.5rem;\n border-radius: 3rem;\n cursor: pointer;\n font-weight: 600;\n color: var(--text-color);\n transition: color 0.3s ease-in-out;\n z-index: 2;\n}\n\n.pill-radio-container input:checked + label {\n color: #fff;\n}\n\n.pill-radio-container label:hover {\n color: var(--main-color);\n}\n\n.pill-indicator {\n position: absolute;\n bottom: 5px;\n left: 0;\n height: 4px;\n width: calc(100% / var(--total-options));\n background: linear-gradient(\n to right,\n var(--main-color),\n var(--secondary-color)\n );\n border-radius: 2px;\n transition: transform 0.3s ease-in-out;\n z-index: 1;\n}\n\n/* Sliding effect */\n#pill-free:checked ~ .pill-indicator {\n transform: translateX(70%);\n}\n#pill-basic:checked ~ .pill-indicator {\n transform: translateX(300%);\n}\n#pill-premium:checked ~ .pill-indicator {\n transform: translateX(600%);\n}\n"}

calm-parrot-39

👁 实时预览

📝 源代码