{"html":"

\n \n

\n \n 2322\n

\n \n \n \n

\n \n

\n","css":".card {\n --pink-500: #fda8ff;\n --red-400: #f56767;\n --sky-300: #bbefff;\n --blue-500: #00a3fe;\n\n cursor: pointer;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 0.75rem;\n\n padding: 1rem;\n width: 14rem;\n height: auto;\n background-color: black;\n\n border-radius: 0.5rem;\n}\n\n.card .rectangle {\n position: absolute;\n\n width: 0.925rem;\n aspect-ratio: 1 / 1;\n background-color: white;\n\n opacity: 0;\n box-shadow: 0rem 0rem 0rem 0.175rem black;\n}\n.card:hover .rectangle {\n opacity: 1;\n}\n\n.card .rectangle.left-top {\n top: -0.25rem;\n left: -0.25rem;\n}\n.card .rectangle.right-top {\n top: -0.25rem;\n right: -0.25rem;\n}\n.card .rectangle.left-bottom {\n bottom: -0.25rem;\n left: -0.25rem;\n}\n.card .rectangle.right-bottom {\n bottom: -0.25rem;\n right: -0.25rem;\n}\n\n.card .image {\n position: relative;\n z-index: 10;\n display: flex;\n justify-content: center;\n align-items: center;\n\n padding: 0.25rem;\n width: 100%;\n height: 7.25rem;\n background-color: var(--pink-500);\n\n border-radius: 0.25rem;\n}\n\n.card .image .svg {\n width: 2.5rem;\n fill: black;\n}\n\n.card .title {\n position: relative;\n z-index: 10;\n\n font-size: 1.25rem;\n color: white;\n font-weight: bold;\n}\n\n.card .love {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n\n font-size: 1rem;\n font-weight: bold;\n color: white;\n}\n\n.card .love .svg {\n width: 1.25rem;\n fill: var(--red-400);\n}\n\n.card .category {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n\n.card .category .button {\n cursor: pointer;\n\n padding: 0.25rem 0.5rem;\n background-color: #d9d9d9;\n\n font-size: 0.5rem;\n color: black;\n\n border: 2px solid transparent;\n border-radius: 9999px;\n transition: all 0.3s ease-in-out;\n}\n.card .category .button:hover {\n border: 2px solid var(--blue-500);\n}\n\n.card .action {\n padding-block: 0.375rem;\n margin-top: 0.75rem;\n background-color: var(--sky-300);\n\n font-size: 0.75rem;\n font-weight: 700;\n color: black;\n\n border: 2px solid transparent;\n border-radius: 0.5rem;\n transition: all 0.3s ease-in-out;\n}\n.card .action:hover {\n border: 2px solid var(--blue-500);\n}\n"}

calm-sloth-44

👁 实时预览

📝 源代码