{"html":"

\n \n \n \n \n \n \n \n

\n \n \n \n

\n \n \n \n \n \n

\n \n \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n

\n \n \n \n \n \n \n

\n \n \n \n \n \n \n \n

HOVER

FOR

SOCIAL

\n","css":".main_back {\n position: absolute;\n border-radius: 10px;\n transform: rotate(90deg);\n width: 11em;\n height: 11em;\n background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);\n z-index: -2;\n box-shadow: inset 0px 0px 180px 5px #ffffff;\n}\n\n.main {\n display: flex;\n flex-wrap: wrap;\n width: 14em;\n align-items: center;\n justify-content: center;\n z-index: -1;\n}\n\n.card {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 60px;\n height: 60px;\n border-top-left-radius: 10px;\n background: lightgrey;\n transition: 0.4s ease-in-out, 0.2s background-color ease-in-out,\n 0.2s background-image ease-in-out;\n background: rgba(255, 255, 255, 0.596);\n backdrop-filter: blur(5px);\n border: 1px solid transparent;\n -webkit-backdrop-filter: blur(5px);\n}\n\n.card .instagram {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: #cc39a4;\n}\n\n.card:nth-child(2) {\n border-radius: 0px;\n}\n\n.card:nth-child(2) .twitter {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: #03a9f4;\n}\n\n.card:nth-child(3) {\n border-top-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(3) .dribble {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: #ffb5d2;\n}\n\n.card:nth-child(4) {\n border-radius: 0px;\n}\n\n.card:nth-child(4) .codepen {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(5) {\n border-radius: 0px;\n}\n\n.card:nth-child(5) .uiverse {\n position: absolute;\n margin-left: 0.2em;\n margin-top: 0.2em;\n opacity: 0;\n transition: 0.2s ease-in-out;\n}\n\n.card:nth-child(6) {\n border-radius: 0px;\n}\n\n.card:nth-child(6) .discord {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: #8c9eff;\n}\n\n.card:nth-child(7) {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(7) .github {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: black;\n}\n\n.card:nth-child(8) {\n border-radius: 0px;\n}\n\n.card:nth-child(8) .telegram {\n opacity: 0;\n transition: 0.2s ease-in-out;\n fill: #29b6f6;\n}\n\n.card:nth-child(9) {\n border-bottom-right-radius: 10px;\n border-top-left-radius: 0px;\n}\n\n.card:nth-child(9) .reddit {\n opacity: 0;\n transition: 0.2s ease-in-out;\n}\n\n.main:hover {\n width: 14em;\n cursor: pointer;\n}\n\n.main:hover .main_back {\n opacity: 0;\n}\n\n.main:hover .card {\n margin: 0.2em;\n border-radius: 10px;\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.3);\n background: rgba(255, 255, 255, 0.2);\n}\n\n.main:hover .card:nth-child(5) {\n border: transparent;\n}\n\n.main:hover .text {\n opacity: 0;\n z-index: -3;\n}\n\n.main:hover .instagram {\n opacity: 1;\n}\n\n.main:hover .twitter {\n opacity: 1;\n}\n\n.main:hover .dribble {\n opacity: 1;\n}\n\n.main:hover .codepen {\n opacity: 1;\n}\n\n.main:hover .uiverse {\n opacity: 1;\n}\n\n.main:hover .discord {\n opacity: 1;\n}\n\n.main:hover .github {\n opacity: 1;\n}\n\n.main:hover .telegram {\n opacity: 1;\n}\n\n.main:hover .reddit {\n opacity: 1;\n}\n\n.card:nth-child(1):hover {\n background-color: #cc39a4;\n}\n\n.card:nth-child(1):hover .instagram {\n fill: white;\n}\n\n.card:nth-child(2):hover {\n background-color: #03a9f4;\n}\n\n.card:nth-child(2):hover .twitter {\n fill: white;\n}\n\n.card:nth-child(3):hover {\n background-color: #ffb5d2;\n}\n\n.card:nth-child(3):hover .dribble {\n fill: white;\n}\n\n.card:nth-child(4):hover {\n background-color: #1e1f26;\n}\n\n.card:nth-child(4):hover .codepen {\n fill: white;\n}\n\n.card:nth-child(5):hover {\n animation: backgroundIMG 0.1s;\n animation-fill-mode: forwards;\n}\n\n.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {\n stop-color: white;\n}\n\n.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {\n stop-color: white;\n}\n\n@keyframes backgroundIMG {\n 100% {\n background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);\n }\n}\n\n.card:nth-child(6):hover {\n background-color: #8c9eff;\n}\n\n.card:nth-child(6):hover .discord {\n fill: white;\n}\n\n.card:nth-child(7):hover {\n background-color: black;\n}\n\n.card:nth-child(7):hover .github {\n fill: white;\n}\n\n.card:nth-child(8):hover {\n background-color: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(1) {\n fill: white;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(2) {\n fill: #29b6f6;\n}\n\n.card:nth-child(8):hover .telegram > path:nth-of-type(3) {\n fill: #29b6f6;\n}\n\n.card:nth-child(9):hover {\n background-color: rgb(255, 69, 0);\n}\n\n.card:nth-child(9) .reddit > g circle {\n fill: rgb(255, 69, 0);\n}\n\n.card:nth-child(9) .reddit > g path {\n fill: white;\n}\n\n.text {\n position: absolute;\n font-size: 0.7em;\n transition: 0.4s ease-in-out;\n color: black;\n text-align: center;\n font-weight: bold;\n letter-spacing: 0.33em;\n z-index: 3;\n}\n"}

smooth-crab-52

👁 实时预览

📝 源代码

🔗 相关联的样式