{"html":"

\n \n \n \n

Yes

\n \n Easy\n \n \n \n \n

Yes

\n \n Normal\n \n \n \n \n

Yes

\n \n Hard\n \n

\n","css":".container {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.container label {\n transform-style: preserve-3d;\n perspective: 100px;\n position: relative;\n display: flex;\n align-items: center;\n font-size: 18px;\n cursor: pointer;\n}\n.container label span {\n position: relative;\n margin-right: 0px;\n width: 60px;\n height: 40px;\n transform: rotateY(180deg);\n transition-duration: 0.6s;\n margin: 0 10px 0 10px;\n transform-style: preserve-3d;\n perspective: 100px;\n padding: 0px;\n transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n background: #111;\n border-radius: 50px;\n cursor: pointer;\n box-shadow:\n inset 2px 2px 2px #fff9,\n 5px 5px 5px #2225;\n}\n.container label span p {\n position: absolute;\n transform-origin: 50% 50%;\n left: 0%;\n right: 0%;\n transform: translateX(50px) translateY(50px);\n font-weight: 600;\n text-align: center;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5;\n font-size: 12px;\n text-shadow: 0 0 2px;\n}\n.container label span .a {\n backface-visibility: visible;\n color: green;\n transform: translateX(0%) translateY(0%) translateZ(10px) rotateY(0deg);\n}\n.container label span .b {\n backface-visibility: visible;\n color: red;\n transform: translateX(0%) translateY(0%) translateZ(-10px) rotateY(180deg);\n}\n\n.container label input[type=\"radio\"] {\n appearance: none;\n}\n\n.container label input[type=\"radio\"]:checked ~ span {\n box-shadow:\n inset -2px 2px 2px #fff9,\n -5px 5px 5px #2225;\n transform: rotateY(0deg);\n}\n"}

average-quail-26

👁 实时预览

📝 源代码