{"html":"\n","css":".share {\n width: 150px;\n height: 150px;\n margin: 5em auto;\n background: rgba(10, 237, 189, 1);\n background: -webkit-radial-gradient(\n top left,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n background: -moz-radial-gradient(\n top left,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n background: radial-gradient(\n to bottom right,\n rgba(10, 237, 189, 1),\n rgba(37, 211, 103, 1)\n );\n text-align: center;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);\n}\n\n.share a {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: 90px;\n height: 90px;\n position: relative;\n z-index: 1;\n}\n\n.share::after {\n content: \"Share\";\n position: absolute;\n left: 0;\n right: 0;\n top: 40%;\n font-size: 25px;\n font-weight: bold;\n font-style: italic;\n text-transform: uppercase;\n color: #fff;\n}\n\n.share:hover::after {\n color: transparent;\n}\n\n.share:hover {\n background: rgba(242, 41, 92, 1);\n background: -webkit-radial-gradient(\n top left,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n background: -moz-radial-gradient(\n top left,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n background: radial-gradient(\n to bottom right,\n rgba(242, 41, 92, 1),\n rgba(41, 172, 225, 1)\n );\n}\n\n.share a.fb {\n background: #1266f1;\n top: -5.65em;\n left: -2.83em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.tw {\n background: #28abe1;\n top: -6.55em;\n right: -9.39em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.ins {\n background: #f2295b;\n bottom: 6.7em;\n left: -7.5em;\n -webkit-tra3nsition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share a.wh {\n background: #25d366;\n right: -2.81em;\n bottom: 7.5em;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n}\n\n.share:hover a.fb {\n top: -0.96em;\n}\n\n.share:hover a.tw {\n right: -2.8em;\n}\n\n.share:hover a.ins {\n left: -2.84em;\n}\n\n.share:hover a.wh {\n bottom: 12.3em;\n}\n\n.facebook {\n padding-top: 45%;\n}\n\n.instagram {\n padding-left: 30%;\n padding-top: 15%;\n}\n\n.whatsapp {\n padding-left: 15%;\n padding-top: 15%;\n}\n\n.twitter {\n padding-top: 25%;\n padding-left: 10%;\n}\n\n.fb:hover {\n box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5) inset;\n}\n\n.tw:hover {\n box-shadow: 10px 5px 30px 2px rgba(0, 0, 0, 0.5) inset;\n}\n\n.ins:hover {\n box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5) inset;\n}\n\n.wh:hover {\n box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.5) inset;\n}\n"}

lucky-mouse-88

👁 实时预览

📝 源代码