{"html":"

\n","css":".space-loader {\n width: 200px;\n height: 200px;\n position: relative;\n background-color: #000;\n border-radius: 50%;\n overflow: hidden;\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);\n}\n\n.planet {\n width: 80px;\n height: 80px;\n background: radial-gradient(circle at 30% 30%, #fff, #888);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);\n}\n\n.ring {\n width: 120px;\n height: 120px;\n border: 4px solid rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg);\n animation: rotate 12s linear infinite;\n}\n\n.orbit {\n width: 160px;\n height: 160px;\n border: 1px dashed rgba(255, 255, 255, 0.3);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.satellite {\n width: 10px;\n height: 10px;\n background-color: #fff;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: orbit 8s linear infinite;\n}\n\n.stars {\n width: 100%;\n height: 100%;\n position: absolute;\n animation: twinkle 4s ease-in-out infinite;\n}\n\n.star {\n position: absolute;\n background-color: #fff;\n border-radius: 50%;\n}\n\n@keyframes rotate {\n 0% {\n transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg) rotate(0deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotateX(75deg) rotateY(15deg)\n rotate(360deg);\n }\n}\n\n@keyframes orbit {\n 0% {\n transform: rotate(0deg) translateX(80px) rotate(0deg);\n }\n 100% {\n transform: rotate(360deg) translateX(80px) rotate(-360deg);\n }\n}\n\n@keyframes twinkle {\n 0%,\n 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.8;\n }\n}\n"}

witty-deer-53

👁 实时预览

📝 源代码