{"html":"

\n Main Title\n

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

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio,\n quo modo possit, si luxuriosus sit, finitas cupiditates habere.\n \n

\n Access\n

\n","css":".card {\n position: relative;\n display: flex;\n width: 350px;\n background-color: #242824;\n padding: 10px;\n border-radius: 6px;\n gap: 0.5rem;\n height: max-content;\n}\n.bar {\n width: 10px;\n border-radius: 5px;\n background-color: #9147ff;\n transition: all 0.5s ease-in-out;\n}\n.card:hover .bar {\n margin-right: 5px;\n}\n.card_form {\n position: relative;\n min-width: 5em;\n min-height: 5em;\n border-radius: 4px;\n background-color: #9147ff;\n transition: 0.2s ease-in-out;\n overflow: hidden;\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 margin-top: auto;\n font-size: 0.9em;\n transition: 0.2s ease-in-out;\n cursor: pointer;\n}\n.card_data span:hover {\n color: #28aea5;\n text-decoration: underline;\n}\n.text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\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.text_d {\n font-size: 0.7em;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\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"}

jolly-skunk-2

👁 实时预览

📝 源代码