{"html":"

\n (Topic)\n

\n Main Title\n

\n Access the list (Topic)\n Username-id\n

\n Access\n

\n","css":".card {\n position: relative;\n display: flex;\n flex-direction: column;\n background-color: #242824;\n padding: 10px;\n border-radius: 6px;\n gap: 0.5rem;\n height: max-content;\n}\n.card_form {\n position: relative;\n width: 15em;\n height: 15em;\n border-radius: 4px;\n background-color: #9147ff;\n transition: 0.2s ease-in-out;\n overflow: hidden;\n}\n.card_form span {\n font-size: 1.5em;\n position: absolute;\n inset: 0;\n padding: 5px 10px;\n color: #fff;\n background-image: linear-gradient(\n to top,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.7) 100%\n );\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n.card:hover .card_form span,\n.card:hover .card_data span {\n opacity: 1;\n}\n.card_data {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.card_data span {\n color: #9147ff;\n display: flex;\n align-items: center;\n font-size: 0.9em;\n transition: 0.2s ease-in-out;\n opacity: 0;\n cursor: pointer;\n}\n.card_data span:hover {\n text-decoration: underline;\n}\n.text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n color: white;\n}\n.text_m {\n font-size: 0.9em;\n}\n.text_s {\n color: #9147ff;\n font-size: 0.6em;\n}\n.cube {\n width: max-content;\n height: 10px;\n transition: all 0.2s;\n transform-style: preserve-3d;\n}\n.card:hover .cube {\n transform: rotateX(90deg);\n}\n.side {\n width: max-content;\n height: 1em;\n display: flex;\n justify-content: center;\n align-items: center;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-weight: bold;\n}\n.top {\n transform: rotateX(-90deg) translate3d(0, 0, 0em);\n}\n.front {\n transform: translate3d(0, 0, 1em);\n}\n"}

itchy-ape-77

👁 实时预览

📝 源代码