{"html":"

\n \n Static\n\n \n Liquid\n\n \n Fluid\n\n

\n","css":"/* ===============================\n CONTAINER\n================================= */\n.liquid-group {\n --gap: 6px;\n --radius: 16px;\n --speed: 0.55s;\n --ease: cubic-bezier(0.22, 0.9, 0.25, 1);\n\n position: relative;\n display: inline-grid;\n grid-auto-flow: column;\n background: #000;\n padding: var(--gap);\n border-radius: var(--radius);\n border: 1px solid #1a1a1a;\n margin: 30px auto;\n overflow: hidden;\n}\n\n/* ===============================\n INPUT (hidden acessível)\n================================= */\n.liquid-group input[type=\"radio\"] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* ===============================\n LABELS\n================================= */\n.liquid-group label {\n position: relative;\n z-index: 2;\n padding: 12px 28px;\n font-size: 13px;\n font-weight: 500;\n letter-spacing: 0.5px;\n color: #555;\n cursor: pointer;\n white-space: nowrap;\n\n transition:\n color 0.35s ease,\n transform 0.2s ease;\n}\n\n/* micro feedback */\n.liquid-group label:active {\n transform: scale(0.97);\n}\n\n/* texto ativo */\n.liquid-group input:checked + label {\n color: #fff;\n}\n\n/* ===============================\n SLIDER (LIQUID)\n================================= */\n.liquid-slider {\n position: absolute;\n inset: var(--gap);\n width: calc(100% / 3 - var(--gap));\n border-radius: calc(var(--radius) - 4px);\n background: #222;\n z-index: 1;\n\n transition:\n transform var(--speed) var(--ease),\n background 0.3s ease;\n}\n\n/* brilho interno */\n.liquid-slider::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n box-shadow:\n inset 0 1px 1px rgba(255, 255, 255, 0.06),\n inset 0 -1px 2px rgba(0, 0, 0, 0.6);\n}\n\n/* ===============================\n MOVIMENTO AUTOMÁTICO\n================================= */\n\n#value-1:checked ~ .liquid-slider {\n transform: translateX(0%);\n}\n\n#value-2:checked ~ .liquid-slider {\n transform: translateX(100%);\n}\n\n#value-3:checked ~ .liquid-slider {\n transform: translateX(200%);\n}\n"}

new-treefrog-13

👁 实时预览

📝 源代码