{"html":"

\n \n \n\n \n \n \n \n Home\n \n\n \n \n \n \n Profile\n \n\n

\n","css":".flip-switch-container {\n --card-width: 110px;\n --card-height: 120px;\n --switch-bg: rgba(255, 255, 255, 0.1);\n --switch-border-color: rgba(255, 255, 255, 0.2);\n --text-color: #ffffff;\n --inactive-text-color: rgba(255, 255, 255, 0.6);\n --icon-shadow-color: rgba(0, 0, 0, 0.3);\n --card-bg: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.2),\n rgba(255, 255, 255, 0.1)\n );\n --highlight-color: #64ffda;\n\n display: grid;\n place-content: center;\n min-height: 100%;\n font-family: \"Poppins\", sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.flip-switch {\n display: flex;\n position: relative;\n width: calc(var(--card-width) * 2);\n height: var(--card-height);\n background: var(--switch-bg);\n border-radius: 20px;\n border: 1px solid var(--switch-border-color);\n box-shadow:\n 0 8px 32px 0 rgba(31, 38, 135, 0.37),\n inset 0 4px 8px rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n perspective: 1000px;\n}\n\n.flip-switch input[type=\"radio\"] {\n display: none;\n}\n\n.flip-switch .switch-button {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n cursor: pointer;\n z-index: 2;\n color: var(--inactive-text-color);\n transition: all 0.3s ease;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n}\n\n.flip-switch .switch-button:hover {\n color: var(--text-color);\n}\n\n.flip-switch .switch-button:hover svg {\n transform: translateY(-3px);\n filter: drop-shadow(0 4px 6px var(--icon-shadow-color)) brightness(1.2);\n}\n\n.flip-switch .switch-button svg {\n transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);\n filter: drop-shadow(0 2px 3px var(--icon-shadow-color));\n width: 24px;\n height: 24px;\n}\n\n.flip-switch .switch-button span {\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.5px;\n}\n\n.flip-switch #switch-opt-1:checked ~ [for=\"switch-opt-1\"],\n.flip-switch #switch-opt-2:checked ~ [for=\"switch-opt-2\"] {\n color: var(--text-color);\n text-shadow: 0 0 8px rgba(100, 255, 218, 0.5);\n}\n\n.flip-switch #switch-opt-1:checked ~ [for=\"switch-opt-2\"],\n.flip-switch #switch-opt-2:checked ~ [for=\"switch-opt-1\"] {\n color: var(--inactive-text-color);\n}\n\n.flip-switch .switch-card {\n position: absolute;\n top: 0;\n left: 0;\n width: var(--card-width);\n height: var(--card-height);\n z-index: 1;\n transform-style: preserve-3d;\n}\n\n.flip-switch .card-face {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 20px;\n background: var(--card-bg);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow:\n 0 4px 20px rgba(0, 0, 0, 0.2),\n inset 0 2px 4px rgba(255, 255, 255, 0.1);\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n}\n\n.flip-switch .card-back {\n transform: rotateY(180deg);\n}\n\n.flip-switch #switch-opt-2:checked ~ .switch-card {\n animation: flipRight 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;\n}\n\n.flip-switch #switch-opt-1:checked ~ .switch-card {\n animation: flipLeft 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards;\n}\n\n@keyframes flipRight {\n 0% {\n transform: translateX(0%) rotateY(0deg);\n }\n 50% {\n transform: translateX(50%) rotateY(90deg) scale(1.05);\n }\n 100% {\n transform: translateX(100%) rotateY(180deg) scale(1);\n }\n}\n\n@keyframes flipLeft {\n 0% {\n transform: translateX(100%) rotateY(180deg);\n }\n 50% {\n transform: translateX(50%) rotateY(90deg) scale(1.05);\n }\n 100% {\n transform: translateX(0%) rotateY(0deg) scale(1);\n }\n}\n\n.flip-switch #switch-opt-1:checked ~ [for=\"switch-opt-1\"]::after,\n.flip-switch #switch-opt-2:checked ~ [for=\"switch-opt-2\"]::after {\n content: \"\";\n position: absolute;\n bottom: -5px;\n width: 30px;\n height: 3px;\n background: var(--highlight-color);\n border-radius: 2px;\n animation: glow 1.5s infinite alternate;\n}\n\n@keyframes glow {\n from {\n box-shadow: 0 0 5px var(--highlight-color);\n }\n to {\n box-shadow:\n 0 0 15px var(--highlight-color),\n 0 0 25px var(--highlight-color);\n }\n}\n"}

wet-grasshopper-85

👁 实时预览

📝 源代码