1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Orbit Animation</title>
7<style>
8 body {
9 background-color: #333;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 overflow: hidden;
16 }
17 .orbit {
18 width: 200px;
19 height: 100px;
20 border: 2px solid white;
21 border-radius: 50%;
22 position: relative;
23 transform: rotate(0deg);
24 animation: orbit 4s linear infinite;
25 }
26 .planet {
27 width: 20px;
28 height: 20px;
29 background-color: #ccc;
30 border-radius: 50%;
31 position: absolute;
32 top: 50%;
33 left: 50%;
34 transform: translate(-50%, -50%);
35 animation: orbit-planet 4s linear infinite;
36 }
37 @keyframes orbit {
38 0% { transform: rotate(0deg); }
39 100% { transform: rotate(360deg); }
40 }
41 @keyframes orbit-planet {
42 0% { transform: translate(-50%, -50%) rotate(0deg); }
43 100% { transform: translate(-50%, -50%) rotate(360deg); }
44 }
45</style>
46</head>
47<body>
48 <div class="orbit">
49 <div class="planet"></div>
50 </div>
51</body>
52</html>