{"html":"","css":".social {\n margin: 0;\n list-style: none;\n padding-left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.social .social-item {\n margin: 0 30px;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.social .social-item .social-link {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #fff;\n text-align: center;\n transform: perspective(1000px) rotate(-30deg) skew(25deg)\n translate(0, 0);\n transition: all 0.4s ease;\n}\n\n.social .social-item .social-link::before {\n content: \"\";\n position: absolute;\n top: 5px;\n left: -10px;\n height: 100%;\n width: 10px;\n background: #b1b1b1;\n transition: all 0.4s ease;\n transform: rotate(0deg) skewY(-45deg);\n}\n\n.social .social-item .social-link::after {\n content: \"\";\n position: absolute;\n top: 40px;\n left: -5px;\n height: 10px;\n width: 100%;\n background: #b1b1b1;\n transition: all 0.4s ease;\n transform: rotate(0deg) skewX(-45deg);\n}\n\n.social .social-item .social-link:hover {\n transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);\n box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);\n}\n\n.social .social-item:nth-child(1) a {\n color: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a::before {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(1):hover a::after {\n background: #3b5999;\n}\n\n.social .social-item:nth-child(2) a {\n color: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a {\n background: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a::before {\n background: #55acee;\n}\n\n.social .social-item:nth-child(2):hover a::after {\n background: #55acee;\n}\n\n.social .social-item:nth-child(3) a {\n color: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a::before {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(3):hover a::after {\n background: #dd4b39;\n}\n\n.social .social-item:nth-child(4) a {\n color: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a {\n background: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a::before {\n background: #e4405f;\n}\n\n.social .social-item:nth-child(4):hover a::after {\n background: #e4405f;\n}\n\n.social .social-item .social-link:hover {\n color: #ffffff;\n}\n\n"}

dull-donkey-56

👁 实时预览

📝 源代码