{"html":"

User

@username

500+ Connections

\n","css":".tooltip-container {\n position: relative;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 17px;\n border-radius: 10px;\n}\n\n.tooltip {\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n padding: 10px;\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n border-radius: 15px;\n box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),\n inset -5px -5px 15px rgba(255, 255, 255, 0.1),\n 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);\n}\n\n.profile {\n background: #2a2b2f;\n border-radius: 10px 15px;\n padding: 10px;\n border: 1px solid rgba(11, 63, 95, 1);\n}\n\n.tooltip-container:hover .tooltip {\n top: -150px;\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n}\n\n.icon {\n text-decoration: none;\n color: #fff;\n display: block;\n position: relative;\n}\n.layer {\n width: 55px;\n height: 55px;\n transition: transform 0.3s;\n}\n.icon:hover .layer {\n transform: rotate(-35deg) skew(20deg);\n}\n.layer span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n border: 1px solid #fff;\n border-radius: 5px;\n transition: all 0.3s;\n}\n\n.layer span,\n.text {\n color: #1da1f2;\n border-color: #1da1f2;\n}\n\n.icon:hover.layer span {\n box-shadow: -1px 1px 3px #1da1f2;\n}\n.icon .text {\n position: absolute;\n left: 50%;\n bottom: -5px;\n opacity: 0;\n font-weight: 500;\n transform: translateX(-50%);\n transition: bottom 0.3s ease, opacity 0.3s ease;\n}\n.icon:hover .text {\n bottom: -35px;\n opacity: 1;\n}\n\n.icon:hover .layer span:nth-child(1) {\n opacity: 0.2;\n}\n.icon:hover .layer span:nth-child(2) {\n opacity: 0.4;\n transform: translate(5px, -5px);\n}\n.icon:hover .layer span:nth-child(3) {\n opacity: 0.6;\n transform: translate(10px, -10px);\n}\n.icon:hover .layer span:nth-child(4) {\n opacity: 0.8;\n transform: translate(15px, -15px);\n}\n.icon:hover .layer span:nth-child(5) {\n opacity: 1;\n transform: translate(20px, -20px);\n}\n\n.layer span.fab {\n font-size: 30px;\n line-height: 64px;\n text-align: center;\n fill: #1da1f2;\n background: #000;\n}\n.user {\n display: flex;\n gap: 10px;\n}\n.img {\n width: 50px;\n height: 50px;\n font-size: 25px;\n font-weight: 700;\n border: 1px solid #1da1f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n}\n.name {\n font-size: 17px;\n font-weight: 700;\n color: #1da1f2;\n}\n.details {\n display: flex;\n flex-direction: column;\n gap: 0;\n color: #fff;\n}\n.about {\n color: #ccc;\n padding-top: 5px;\n}\n"}

evil-mule-52

👁 实时预览

📝 源代码

🔗 相关联的样式