{"html":"

Product Name

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat\n veritatis nobis saepe itaque rerum nostrum aliquid obcaecati odio\n officia deleniti. Expedita iste et illum, quaerat pariatur consequatur\n eum nihil itaque!\n

→

","css":".card-title {\n color: #262626;\n font-size: 1.5em;\n line-height: normal;\n font-weight: 700;\n margin-bottom: 0.5em;\n}\n\n.small-desc {\n font-size: 1em;\n font-weight: 400;\n line-height: 1.5em;\n color: #452c2c;\n}\n\n.small-desc {\n font-size: 1em;\n}\n\n.go-corner {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n width: 2em;\n height: 2em;\n overflow: hidden;\n top: 0;\n right: 0;\n background: linear-gradient(135deg, #6293c8, #384c6c);\n border-radius: 0 4px 0 32px;\n}\n\n.go-arrow {\n margin-top: -4px;\n margin-right: -4px;\n color: white;\n font-family: courier, sans;\n}\n\n.card {\n display: block;\n position: relative;\n max-width: 300px;\n max-height: 320px;\n background-color: #f2f8f9;\n border-radius: 10px;\n padding: 2em 1.2em;\n margin: 12px;\n text-decoration: none;\n z-index: 0;\n overflow: hidden;\n background: linear-gradient(to bottom, #c3e6ec, #a7d1d9);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n.card:before {\n content: '';\n position: absolute;\n z-index: -1;\n top: -16px;\n right: -16px;\n background: linear-gradient(135deg, #364a60, #384c6c);\n height: 32px;\n width: 32px;\n border-radius: 32px;\n transform: scale(1);\n transform-origin: 50% 50%;\n transition: transform 0.35s ease-out;\n}\n\n.card:hover:before {\n transform: scale(28);\n}\n\n.card:hover .small-desc {\n transition: all 0.5s ease-out;\n color: rgba(255, 255, 255, 0.8);\n}\n\n.card:hover .card-title {\n transition: all 0.5s ease-out;\n color: #ffffff;\n}\n"}

giant-squid-24

👁 实时预览

📝 源代码