{"html":"

\n \n \n \n

Twitter

750k

\n\n

\n \n

Facebook

710k

\n\n

\n \n

Instagram

80k

\n","css":".cards {\n height: auto;\n width: fit-content;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 1em;\n transition: all 200ms ease-in-out;\n}\n\n.card-container {\n --font-color: hsl(0, 0%, 15%);\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n transition: all 200ms ease-in-out;\n}\n\n.card-container {\n position: relative;\n width: 250px;\n height: auto;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: 0.5em 1em;\n border-radius: 0.5em;\n cursor: pointer;\n}\n\n.card-container .icon-container {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 0.5em;\n}\n\n.card-container .icon-container svg {\n width: 30px;\n height: 30px;\n}\n\n.card-container .icon-container p {\n font-size: 0.9em;\n font-weight: 400;\n}\n\n.card-container p {\n font-weight: 600;\n}\n\n.twitter-card {\n background-color: hsl(0, 0%, 0%);\n color: hsl(0, 0%, 100%);\n}\n\n.facebook-card {\n background-color: hsl(220, 100%, 60%);\n color: hsl(0, 0%, 100%);\n}\n\n.instagram-card {\n background-color: hsl(350, 100%, 60%);\n color: hsl(0, 0%, 100%);\n}\n\n.card-container:hover {\n transform: scale(1.1);\n z-index: 1;\n}\n\n.cards:hover > .card-container:not(:hover) {\n filter: blur(5px);\n}\n"}

thin-snail-91

👁 实时预览

📝 源代码