{"html":"

\n \n
\n \n \n
Spotify
\n
\n \n
\n \n \n
Pinterest
\n
\n \n
\n \n \n
Dribbble
\n
\n \n
\n \n \n
Telegram
\n

\n","css":"ul {\n list-style: none;\n}\n\n.example-2 {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.example-2 .icon-content {\n margin: 0 10px;\n position: relative;\n}\n.example-2 .icon-content .tooltip {\n position: absolute;\n top: -30px;\n left: 50%;\n transform: translateX(-50%);\n color: #fff;\n padding: 6px 10px;\n border-radius: 5px;\n opacity: 0;\n visibility: hidden;\n font-size: 14px;\n transition: all 0.3s ease;\n}\n.example-2 .icon-content:hover .tooltip {\n opacity: 1;\n visibility: visible;\n top: -50px;\n}\n.example-2 .icon-content a {\n position: relative;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n color: #4d4d4d;\n background-color: #fff;\n transition: all 0.3s ease-in-out;\n}\n.example-2 .icon-content a:hover {\n box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);\n}\n.example-2 .icon-content a svg {\n position: relative;\n z-index: 1;\n width: 30px;\n height: 30px;\n}\n.example-2 .icon-content a:hover {\n color: white;\n}\n.example-2 .icon-content a .filled {\n position: absolute;\n top: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0;\n background-color: #000;\n transition: all 0.3s ease-in-out;\n}\n.example-2 .icon-content a:hover .filled {\n height: 100%;\n}\n.example-2 .icon-content a[data-social=\"spotify\"] .filled,\n.example-2 .icon-content a[data-social=\"spotify\"] ~ .tooltip {\n background-color: #1db954;\n}\n.example-2 .icon-content a[data-social=\"pinterest\"] .filled,\n.example-2 .icon-content a[data-social=\"pinterest\"] ~ .tooltip {\n background-color: #bd081c;\n}\n.example-2 .icon-content a[data-social=\"dribbble\"] .filled,\n.example-2 .icon-content a[data-social=\"dribbble\"] ~ .tooltip {\n background-color: #ea4c89;\n}\n.example-2 .icon-content a[data-social=\"telegram\"] .filled,\n.example-2 .icon-content a[data-social=\"telegram\"] ~ .tooltip {\n background-color: #0088cc;\n}\n"}

chilly-eagle-55

👁 实时预览

📝 源代码

🔗 相关联的样式