{"html":"

\n \n

\n Spicy Burger\n

\n 30 Min | 165 Sell\n

\n 2.50\n

","css":".card {\n width: 190px;\n height: 254px;\n overflow: visible;\n cursor: pointer;\n position: relative;\n}\n\n.card::before, .content {\n border-radius: 5px;\n box-shadow: 0px 0px 5px 1px #00000022;\n transition: transform 300ms, box-shadow 200ms;\n}\n\n.card::before {\n position: absolute;\n content: ' ';\n display: block;\n width: 100%;\n height: 100%;\n background-color: #ee9933;\n transform: rotateZ(5deg);\n}\n\n.description {\n width: 100%;\n text-align: center;\n margin-top: 20px;\n}\n\n.info {\n color: #00000066;\n}\n\n.price::before {\n content: '$';\n}\n\n.price {\n font-weight: bold;\n color: #ee9933;\n}\n\n.description p {\n margin-bottom: 10px;\n}\n\n.card .content {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: white;\n padding: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: rotateZ(-5deg);\n}\n\n.content .img {\n width: 150px;\n height: fit-content;\n}\n\n.card:hover::before, .card:hover .content {\n transform: rotateZ(0deg);\n}\n\n.card:active::before, .card:active .content {\n box-shadow: none;\n}"}

orange-newt-83

👁 实时预览

📝 源代码