{"html":"

\n\n

\n","css":".solar-system {\n position: relative;\n width: 20rem;\n height: 20rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.sun {\n position: absolute;\n width: 5rem;\n height: 5rem;\n border-radius: 50%;\n background: linear-gradient(to bottom right, #f59e0b, #ea580c, #dc2626);\n animation: pulse 2s ease-in-out infinite;\n box-shadow: 0 0 60px rgba(255, 165, 0, 0.5);\n z-index: 4;\n}\n\n.sun::before {\n content: \"\";\n position: absolute;\n inset: -2px;\n border-radius: 50%;\n background: linear-gradient(\n to bottom right,\n rgba(255, 236, 153, 0.2),\n rgba(220, 38, 38, 0.2)\n );\n animation: spin 3s linear infinite;\n}\n\n.corona {\n position: absolute;\n inset: -1rem;\n border-radius: 50%;\n background: linear-gradient(\n to bottom right,\n rgba(245, 158, 11, 0.2),\n rgba(220, 38, 38, 0.2)\n );\n filter: blur(8px);\n animation: pulse 2s ease-in-out infinite;\n}\n\n/* Orbity */\n.orbit {\n position: absolute;\n border-radius: 50%;\n border: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.mercury-orbit {\n width: 8rem;\n height: 8rem;\n}\n\n.venus-orbit {\n width: 11rem;\n height: 11rem;\n}\n\n.earth-orbit {\n width: 14rem;\n height: 14rem;\n z-index: 2;\n}\n\n.mars-orbit {\n width: 18rem;\n height: 18rem;\n}\n\n/* Planety */\n.planet {\n position: absolute;\n border-radius: 50%;\n z-index: 3;\n}\n\n.mercury {\n width: 0.75rem;\n height: 0.75rem;\n background: linear-gradient(to bottom right, #d1d5db, #9ca3af);\n box-shadow: 0 0 15px rgba(156, 163, 175, 0.5);\n --orbit-width: 8rem;\n animation: orbit 4s linear infinite;\n}\n\n.venus {\n width: 1rem;\n height: 1rem;\n background: linear-gradient(to bottom right, #fef3c7, #fcd34d);\n box-shadow: 0 0 15px rgba(252, 211, 77, 0.5);\n --orbit-width: 11rem;\n animation: orbit 6s linear infinite;\n}\n\n.earth {\n width: 1.25rem;\n height: 1.25rem;\n background: linear-gradient(to bottom right, #60a5fa, #34d399);\n box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);\n --orbit-width: 14rem;\n animation: orbit 8s linear infinite;\n}\n\n.moon {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background: #d1d5db;\n box-shadow: inset 0 0 4px rgba(156, 163, 175, 0.5);\n animation: orbit 2s linear infinite;\n}\n\n.mars {\n width: 1rem;\n height: 1rem;\n background: linear-gradient(to bottom right, #f87171, #dc2626);\n box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);\n --orbit-width: 18rem;\n animation: orbit 10s linear infinite;\n}\n\n/* ISS */\n.iss {\n position: absolute;\n width: 0.6rem;\n height: 0.3rem;\n background: #e5e7eb;\n border-radius: 2px;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n z-index: 3;\n --iss-orbit: 7.5rem;\n animation: iss-orbit 5s linear infinite;\n}\n\n.iss-panels {\n position: absolute;\n left: 50%;\n top: 50%;\n width: 1.2rem;\n height: 0.15rem;\n background: linear-gradient(to right, #60a5fa, #93c5fd);\n transform: translate(-50%, -50%);\n box-shadow: 0 0 5px rgba(96, 165, 250, 0.5);\n}\n\n.iss::after {\n content: \"\";\n position: absolute;\n inset: -1px;\n background: white;\n border-radius: 2px;\n opacity: 0;\n animation: iss-flare 1.5s linear infinite;\n}\n\n/* Gwiazdy */\n.stars {\n position: absolute;\n inset: -2.5rem;\n z-index: 1;\n}\n\n.star {\n position: absolute;\n width: 0.25rem;\n height: 0.25rem;\n background: white;\n border-radius: 50%;\n}\n\n.star-1 {\n top: 25%;\n left: 25%;\n animation: ping 2s ease-in-out infinite;\n}\n.star-2 {\n top: 75%;\n left: 33%;\n animation: ping 3s ease-in-out infinite 0.5s;\n}\n.star-3 {\n top: 33%;\n right: 25%;\n animation: ping 2.5s ease-in-out infinite 0.7s;\n}\n.star-4 {\n bottom: 25%;\n right: 33%;\n animation: ping 2.7s ease-in-out infinite 0.3s;\n}\n.star-5 {\n top: 50%;\n right: 50%;\n animation: ping 2.3s ease-in-out infinite 0.8s;\n}\n\n/* Animacje */\n@keyframes orbit {\n from {\n transform: rotate(0deg) translateX(calc(var(--orbit-width) / 2))\n rotate(0deg);\n }\n to {\n transform: rotate(360deg) translateX(calc(var(--orbit-width) / 2))\n rotate(-360deg);\n }\n}\n\n@keyframes iss-orbit {\n from {\n transform: rotate(0deg) translateX(var(--iss-orbit)) rotate(0deg);\n }\n to {\n transform: rotate(360deg) translateX(var(--iss-orbit)) rotate(-360deg);\n }\n}\n\n@keyframes iss-tilt {\n 0%,\n 100% {\n transform: rotate(-15deg);\n }\n 50% {\n transform: rotate(15deg);\n }\n}\n\n@keyframes iss-flare {\n 0%,\n 100% {\n opacity: 0;\n }\n 50% {\n opacity: 0.3;\n }\n}\n\n@keyframes pulse {\n 50% {\n opacity: 0.8;\n }\n}\n\n@keyframes ping {\n 75%,\n 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n"}

wise-walrus-39

👁 实时预览

📝 源代码