{"html":"

\n \n \n \n \n

Connecting...

\n","css":".earth-loader {\n --watercolor: #3344c1;\n --landcolor: #7cc133;\n width: 7.5em;\n height: 7.5em;\n background-color: var(--watercolor);\n position: relative;\n overflow: hidden;\n border-radius: 50%;\n box-shadow:\n inset 0em 0.5em rgb(255, 255, 255, 0.25),\n inset 0em -0.5em rgb(0, 0, 0, 0.25);\n border: solid 0.15em white;\n animation: startround 1s;\n animation-iteration-count: 1;\n}\n\n.earth p {\n color: white;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-top: 0.25em;\n font-size: 1.25em;\n font-family: \"Gill Sans\", \"Gill Sans MT\", Calibri, \"Trebuchet MS\", sans-serif;\n}\n\n.earth-loader svg:nth-child(1) {\n position: absolute;\n bottom: -2em;\n width: 7em;\n height: auto;\n animation: round1 5s infinite linear 0.75s;\n}\n\n.earth-loader svg:nth-child(2) {\n position: absolute;\n top: -3em;\n width: 7em;\n height: auto;\n animation: round1 5s infinite linear;\n}\n.earth-loader svg:nth-child(3) {\n position: absolute;\n top: -2.5em;\n width: 7em;\n height: auto;\n animation: round2 5s infinite linear;\n}\n.earth-loader svg:nth-child(4) {\n position: absolute;\n bottom: -2.2em;\n width: 7em;\n height: auto;\n animation: round2 5s infinite linear 0.75s;\n}\n\n@keyframes startround {\n 0% {\n filter: brightness(500%);\n box-shadow: none;\n }\n 75% {\n filter: brightness(500%);\n box-shadow: none;\n }\n 100% {\n filter: brightness(100%);\n box-shadow:\n inset 0em 0.5em rgb(255, 255, 255, 0.25),\n inset 0em -0.5em rgb(0, 0, 0, 0.25);\n }\n}\n\n@keyframes round1 {\n 0% {\n left: -2em;\n opacity: 100%;\n transform: skewX(0deg) rotate(0deg);\n }\n 30% {\n left: -6em;\n opacity: 100%;\n transform: skewX(-25deg) rotate(25deg);\n }\n 31% {\n left: -6em;\n opacity: 0%;\n transform: skewX(-25deg) rotate(25deg);\n }\n 35% {\n left: 7em;\n opacity: 0%;\n transform: skewX(25deg) rotate(-25deg);\n }\n 45% {\n left: 7em;\n opacity: 100%;\n transform: skewX(25deg) rotate(-25deg);\n }\n 100% {\n left: -2em;\n opacity: 100%;\n transform: skewX(0deg) rotate(0deg);\n }\n}\n\n@keyframes round2 {\n 0% {\n left: 5em;\n opacity: 100%;\n transform: skewX(0deg) rotate(0deg);\n }\n 75% {\n left: -7em;\n opacity: 100%;\n transform: skewX(-25deg) rotate(25deg);\n }\n 76% {\n left: -7em;\n opacity: 0%;\n transform: skewX(-25deg) rotate(25deg);\n }\n 77% {\n left: 8em;\n opacity: 0%;\n transform: skewX(25deg) rotate(-25deg);\n }\n 80% {\n left: 8em;\n opacity: 100%;\n transform: skewX(25deg) rotate(-25deg);\n }\n 100% {\n left: 5em;\n opacity: 100%;\n transform: skewX(0deg) rotate(0deg);\n }\n}\n"}

rotten-lionfish-4

👁 实时预览

📝 源代码