{"html":"\n\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t

\n\t\t\t\n\t\t

\n\t","css":".socket {\n width: 200px;\n height: 200px;\n position: absolute;\n left: 50%;\n margin-left: -100px;\n top: 50%;\n margin-top: -100px;\n}\n\n.hex-brick {\n background: #000000;\n width: 30px;\n height: 17px;\n position: absolute;\n top: 5px;\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.h2 {\n transform: rotate(60deg);\n -webkit-transform: rotate(60deg);\n}\n\n.h3 {\n transform: rotate(-60deg);\n -webkit-transform: rotate(-60deg);\n}\n\n.gel {\n height: 30px;\n width: 30px;\n transition: all .3s;\n -webkit-transition: all .3s;\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.center-gel {\n margin-left: -15px;\n margin-top: -15px;\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n}\n\n.c1 {\n margin-left: -47px;\n margin-top: -15px;\n}\n\n.c2 {\n margin-left: -31px;\n margin-top: -43px;\n}\n\n.c3 {\n margin-left: 1px;\n margin-top: -43px;\n}\n\n.c4 {\n margin-left: 17px;\n margin-top: -15px;\n}\n\n.c5 {\n margin-left: -31px;\n margin-top: 13px;\n}\n\n.c6 {\n margin-left: 1px;\n margin-top: 13px;\n}\n\n.c7 {\n margin-left: -63px;\n margin-top: -43px;\n}\n\n.c8 {\n margin-left: 33px;\n margin-top: -43px;\n}\n\n.c9 {\n margin-left: -15px;\n margin-top: 41px;\n}\n\n.c10 {\n margin-left: -63px;\n margin-top: 13px;\n}\n\n.c11 {\n margin-left: 33px;\n margin-top: 13px;\n}\n\n.c12 {\n margin-left: -15px;\n margin-top: -71px;\n}\n\n.c13 {\n margin-left: -47px;\n margin-top: -71px;\n}\n\n.c14 {\n margin-left: 17px;\n margin-top: -71px;\n}\n\n.c15 {\n margin-left: -47px;\n margin-top: 41px;\n}\n\n.c16 {\n margin-left: 17px;\n margin-top: 41px;\n}\n\n.c17 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c18 {\n margin-left: 49px;\n margin-top: -15px;\n}\n\n.c19 {\n margin-left: -63px;\n margin-top: -99px;\n}\n\n.c20 {\n margin-left: 33px;\n margin-top: -99px;\n}\n\n.c21 {\n margin-left: 1px;\n margin-top: -99px;\n}\n\n.c22 {\n margin-left: -31px;\n margin-top: -99px;\n}\n\n.c23 {\n margin-left: -63px;\n margin-top: 69px;\n}\n\n.c24 {\n margin-left: 33px;\n margin-top: 69px;\n}\n\n.c25 {\n margin-left: 1px;\n margin-top: 69px;\n}\n\n.c26 {\n margin-left: -31px;\n margin-top: 69px;\n}\n\n.c27 {\n margin-left: -79px;\n margin-top: -15px;\n}\n\n.c28 {\n margin-left: -95px;\n margin-top: -43px;\n}\n\n.c29 {\n margin-left: -95px;\n margin-top: 13px;\n}\n\n.c30 {\n margin-left: 49px;\n margin-top: 41px;\n}\n\n.c31 {\n margin-left: -79px;\n margin-top: -71px;\n}\n\n.c32 {\n margin-left: -111px;\n margin-top: -15px;\n}\n\n.c33 {\n margin-left: 65px;\n margin-top: -43px;\n}\n\n.c34 {\n margin-left: 65px;\n margin-top: 13px;\n}\n\n.c35 {\n margin-left: -79px;\n margin-top: 41px;\n}\n\n.c36 {\n margin-left: 49px;\n margin-top: -71px;\n}\n\n.c37 {\n margin-left: 81px;\n margin-top: -15px;\n}\n\n.r1 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 {\n animation-name: pulse00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: pulse00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n.r1 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .2s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .2s;\n}\n\n.r2 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .4s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .4s;\n}\n\n.r3 > .hex-brick {\n animation-name: fade00;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-delay: .6s;\n -webkit-animation-name: fade00;\n -webkit-animation-duration: 2s;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: .6s;\n}\n\n@keyframes pulse00 {\n 0% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n\n 50% {\n -webkit-transform: scale(0.01);\n transform: scale(0.01);\n }\n\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n}\n\n@keyframes fade00 {\n 0% {\n background: #252525;\n }\n\n 50% {\n background: #000000;\n }\n\n 100% {\n background: #353535;\n }\n}\n"}

tender-swan-29

👁 实时预览

📝 源代码

🔗 相关联的样式