{"html":"

\n","css":".solar-system-container {\n perspective: 1500px;\n width: 200px;\n height: 200px;\n margin: 50px auto;\n}\n\n.solar-system {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: all 0.5s ease-out;\n animation: rotate-center 6s linear infinite;\n}\n\n.sun {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50px;\n height: 50px;\n background: radial-gradient(circle at 30% 30%, #fff, #ffd700, #ffa500);\n border-radius: 50%;\n transform: translate(-50%, -50%) translateZ(0);\n box-shadow: 0 0 20px #ffd700;\n transition: all 0.5s ease-out;\n}\n\n.earth-orbit {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border: 2px dashed rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n transform: translate(-50%, -50%) translateZ(-50px);\n transform-style: preserve-3d;\n transition: all 0.5s ease-out;\n}\n\n.earth {\n position: absolute;\n top: -10px;\n left: 50%;\n width: 20px;\n height: 20px;\n background: radial-gradient(circle at 30% 30%, #4b9cd3, #1b4f72);\n border-radius: 50%;\n transform: translateX(-50%) translateZ(0);\n transform-style: preserve-3d;\n transition: all 0.5s ease-out;\n}\n\n.moon-orbit {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 40px;\n height: 40px;\n border: 1px dashed rgba(255, 255, 255, 0.1);\n border-radius: 50%;\n transform: translate(-50%, -50%) translateZ(-10px);\n animation: rotate-orbit 2s linear infinite;\n transform-style: preserve-3d;\n transition: all 0.5s ease-out;\n}\n\n.moon {\n position: absolute;\n top: -3px;\n left: 50%;\n width: 6px;\n height: 6px;\n background: radial-gradient(circle at 30% 30%, #fff, #ccc);\n border-radius: 50%;\n transform: translateX(-50%) translateZ(0);\n transition: all 0.5s ease-out;\n}\n\n/* Hover Effects */\n.solar-system-container:hover .solar-system {\n animation-play-state: paused;\n transform: rotateX(45deg) rotateY(-45deg);\n}\n\n.solar-system-container:hover .sun {\n transform: translate(-50%, -50%) translateZ(100px);\n box-shadow: 0 0 40px #ffd700;\n}\n\n.solar-system-container:hover .earth-orbit {\n transform: translate(-50%, -50%) translateZ(-100px) rotateX(75deg);\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.solar-system-container:hover .earth {\n transform: translateX(-50%) translateZ(20px);\n box-shadow: 0 0 15px rgba(75, 156, 211, 0.8);\n}\n\n.solar-system-container:hover .moon-orbit {\n transform: translate(-50%, -50%) translateZ(-120px) rotateX(75deg);\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n.solar-system-container:hover .moon {\n transform: translateX(-50%) translateZ(10px);\n box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n}\n\n/* Active state for even more depth */\n.solar-system-container:active .solar-system {\n transform: rotateX(55deg) rotateY(-55deg);\n}\n\n.solar-system-container:active .sun {\n transform: translate(-50%, -50%) translateZ(150px);\n box-shadow: 0 0 50px #ffd700;\n}\n\n.solar-system-container:active .earth-orbit {\n transform: translate(-50%, -50%) translateZ(-150px) rotateX(85deg);\n}\n\n.solar-system-container:active .moon-orbit {\n transform: translate(-50%, -50%) translateZ(-180px) rotateX(85deg);\n}\n\n@keyframes rotate-orbit {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n\n@keyframes rotate-center {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"}

swift-wombat-20

👁 实时预览

📝 源代码