{"html":"

\n \n Yes\n \n \n \n No\n \n \n \n Idk\n \n \n \n

","css":".container {\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n\n.pane {\n outline: 2px solid #00ff6a;\n box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77;\n height: 1cm;\n width: 4.5cm;\n border-radius: 5px;\n position: relative;\n overflow: hidden;\n transition: 0.7s ease;\n}\n\n.input {\n display: none;\n}\n\n.label {\n height: 1cm;\n width: 1.5cm;\n float: left;\n font-weight: 600;\n letter-spacing: -1px;\n font-size: 14px;\n padding: 0px;\n position: relative;\n z-index: 1;\n color: #00ff6a;\n text-align: center;\n padding-top: 10px;\n}\n\n.selection {\n display: none;\n position: absolute;\n height: 1cm;\n width: calc(4.5cm / 3);\n z-index: 0;\n left: 0;\n top: 0;\n box-shadow: 0 0 10px #00ff6a77;\n transition: .15s ease;\n}\n\n.label:has(input:checked) {\n color: #212121;\n}\n\n.pane:has(.label:nth-child(1):hover) {\n transform: rotateY(-30deg);\n}\n\n.pane:has(.label:nth-child(3):hover) {\n transform: rotateY(35deg);\n}\n\n.label:has(input:checked) ~ .selection {\n background-color: #00ff6a;\n display: inline-block;\n}\n\n.label:nth-child(1):has(input:checked) ~ .selection {\n transform: translateX(calc(4.5cm * 0/3));\n}\n\n.label:nth-child(2):has(input:checked) ~ .selection {\n transform: translateX(calc(4.5cm * 1/3));\n}\n\n.label:nth-child(3):has(input:checked) ~ .selection {\n transform: translateX(calc(4.5cm * 2/3));\n}"}

stale-parrot-18

👁 实时预览

📝 源代码