{"html":"

\n \n \n \n

\n Instagram \n

Get UI elements that help you stand out.

\n Follow us\n

\n","css":".card {\n --bg: #f7f7f8;\n --hover-bg: #ffe5f4;\n --hover-text: #e50087;\n max-width: 23ch;\n text-align: center;\n background: var(--bg);\n padding: 1.5em;\n padding-block: 1.8em;\n border-radius: 5px;\n position: relative;\n overflow: hidden;\n transition:\n 0.3s cubic-bezier(0.6, 0.4, 0, 1),\n transform 0.15s ease;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1em;\n color: black;\n}\n\n.card__body {\n color: #464853;\n line-height: 1.5em;\n font-size: 1em;\n}\n\n.card > :not(span) {\n transition: 0.3s cubic-bezier(0.6, 0.4, 0, 1);\n}\n\n.card > strong {\n display: block;\n font-size: 1.4rem;\n letter-spacing: -0.035em;\n}\n\n.card span {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var(--hover-text);\n border-radius: 5px;\n font-weight: bold;\n top: 100%;\n transition: all 0.3s cubic-bezier(0.6, 0.4, 0, 1);\n}\n\n.card:hover span {\n top: 0;\n font-size: 1.2em;\n}\n\n.card:hover {\n background: var(--hover-bg);\n}\n\n.card:hover > div,\n.card:hover > strong {\n opacity: 0;\n}\n"}

tender-robin-90

👁 实时预览

📝 源代码