{"html":"

\n \n

Card Title

Content

\n","css":".card {\n --color-primary: #11140e;\n --color-border: #8a8b90;\n\n width: 200px;\n height: 200px;\n position: relative;\n color: white;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.card:hover {\n transition: 0.8s ease-in-out;\n}\n\n.top-card {\n width: 200px;\n height: 200px;\n background-color: var(--color-primary);\n border: 1px solid var(--color-border);\n border-radius: 8px;\n position: absolute;\n z-index: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.top-card svg {\n width: 50px;\n height: 50px;\n fill: var(--color-border);\n}\n\n.bottom-card {\n width: 200px;\n height: 120px;\n background-color: var(--color-primary);\n border: 1px solid var(--color-border);\n border-radius: 8px;\n position: relative;\n transition:\n margin-left 0.4s ease-in-out,\n margin-top 0.3s ease-in-out 0.4s;\n padding: 4%;\n padding-top: 45px;\n}\n\n.card:hover .bottom-card {\n margin-top: 160px;\n margin-left: 20px;\n transition:\n margin-top 0.4s ease-in-out,\n margin-left 0.3s ease-in-out 0.4s;\n}\n\n.bottom-card-title {\n font-size: 20px;\n font-weight: bold;\n}\n\n.bottom-card-content {\n font-size: 14px;\n}\n"}

weak-kangaroo-62

👁 实时预览

📝 源代码