{"html":"

Instagram

\n \n \n \n

\n \n \n \n \n

\n \n \n \n

YouTube

\n \n \n \n

\n","css":"#SocailIcons {\n min-width: 350px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: space-around;\n}\n.icons {\n width: 50px;\n height: 50px;\n background: #fff;\n border-radius: 50%;\n cursor: pointer;\n outline: none;\n border: none;\n z-index: -1;\n text-align: center;\n}\n.iconName {\n position: absolute;\n top: -40px;\n font-size: 12px;\n color: #fff;\n transform: scale(0);\n border-radius: 3px;\n text-align: center;\n padding: 3px;\n transition: transform 0.3s ease;\n}\n\n.icons.instaIcon:hover .iconName {\n transform: scale(1);\n left: 15px;\n background: linear-gradient(30deg, #0000ff, #f56040);\n}\n\n.icons.linkedin:hover .iconName {\n transform: scale(1);\n left: 106px;\n background: #0274b3;\n}\n.icons.whatsapp:hover .iconName {\n transform: scale(1);\n right: 100px;\n background: #25d366;\n}\n.icons.youtube:hover .iconName {\n transform: scale(1);\n right: 15px;\n background: #ff0000;\n}\n.icon {\n z-index: 1;\n display: inline-block;\n width: 100%;\n height: 100%;\n text-align: center;\n border-radius: 50%;\n position: relative;\n overflow: hidden;\n border: none;\n outline: none;\n transition: color 0.3s ease;\n color: #0c0c0c;\n}\n.icon:hover {\n color: #fff;\n}\n.icon::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0;\n border-radius: 50%;\n transform: rotateX(360deg);\n transition: height 0.3s ease;\n z-index: -1;\n}\n\n.icon:hover::before {\n height: 100%;\n z-index: 1;\n}\n.icon:hover {\n box-shadow: 5px 5px 10px #181717ce;\n}\n\n.icon.tube::before {\n z-index: -1;\n background: red;\n}\n\n.icon.insta::before {\n z-index: -1;\n background: linear-gradient(40deg, #0000ff, #f56040);\n}\n\n.icon.link::before {\n z-index: -1;\n background: #0274b3;\n}\n\n.icon.whats::before {\n z-index: -1;\n background: #25d366;\n}\n"}

helpless-tiger-43

👁 实时预览

📝 源代码