{"html":"

\n \n

\n \n play\n \n \n\n \n

\n \n stop\n \n \n\n \n

\n \n again\n \n \n

\n","css":".radio-input {\n display: flex;\n align-items: center;\n gap: 6px;\n background-color: black;\n padding: 6px;\n border-radius: 8px;\n overflow: hidden;\n height: 94px;\n}\n\n.radio-input input {\n display: none;\n}\n\n.radio-input .label {\n width: 70px;\n height: 80px;\n background-color: #2a2a2a;\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 8px 6px;\n border-top: 1px solid #383838;\n transition: all 0.1s linear;\n position: relative;\n z-index: 2;\n}\n\n.label .back-side {\n position: absolute;\n top: -10px;\n left: 0px;\n background-color: #2a2a2a;\n border-radius: 4px 4px 2px 2px;\n width: 100%;\n height: 14px;\n box-shadow:\n inset 0 5px 3px 1px rgba(0, 0, 0, 0.5),\n inset 0px -5px 2px 0px rgba(56, 163, 224, 0.1);\n transform: perspective(300px) rotateX(50deg);\n z-index: 1;\n opacity: 0;\n transition: all 0.1s linear;\n}\n\n.label:has(input[type=\"radio\"]:checked) .back-side {\n opacity: 1;\n}\n\n.label:has(input[type=\"radio\"]:checked) {\n transform: perspective(200px) rotateX(-18deg);\n transform-origin: 50% 40%;\n box-shadow: inset 0px -20px 15px 0px rgba(0, 0, 0, 0.5);\n border-top: 1px solid #2589c362;\n margin-top: 6px;\n border-radius: 0 0 4px 4px;\n}\n\n.label .text {\n color: black;\n font-size: 15px;\n line-height: 12px;\n padding: 0px;\n font-weight: 800;\n text-transform: uppercase;\n transition: all 0.1s linear;\n text-shadow: -1px -1px 1px rgb(224, 224, 224, 0.1);\n}\n\n.label input[type=\"radio\"]:checked + .text {\n color: #258ac3;\n text-shadow:\n 0px 0px 8px rgb(37, 138, 195),\n 1px 1px 2px rgb(0, 0, 0, 1);\n}\n\n.label .bottom-line {\n width: 100%;\n height: 4px;\n border-radius: 999px;\n background-color: #2a2a2a;\n box-shadow: 0 0 3px 0px rgb(19, 19, 19);\n border-top: 1px solid #383838;\n transition: all 0.1s linear;\n}\n\n.label:has(input[type=\"radio\"]:checked) .bottom-line {\n background-color: #1a1a1a;\n border-top: 1px solid #258ac340;\n}\n"}

orange-horse-8

👁 实时预览

📝 源代码