使用css实现太阳自转同时地球围着太阳公转的效果

50 阅读1分钟

"```html

Solar System Animation body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; } .sun { width: 100px; height: 100px; background: radial-gradient(circle, #ffdb4d 10%, transparent 25%); border-radius: 50%; position: relative; animation: rotate-sun 10s linear infinite; } .earth { width: 30px; height: 30px; background-color: #2c3e50; border-radius: 50%; position: absolute; top: 50px; left: 100px; animation: orbit-earth 5s linear infinite; } @keyframes rotate-sun { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes orbit-earth { from { transform: rotate(0) translateX(50px) rotate(0); } to { transform: rotate(360deg) translateX(50px) rotate(-360deg); } }
```"