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 margin: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 overflow: hidden;
16 }
17 .orbit {
18 position: relative;
19 }
20 .ball {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 transform: translate(-50%, -50%);
25 width: 20px;
26 height: 20px;
27 border-radius: 50%;
28 background-color: white;
29 }
30 .path {
31 position: absolute;
32 top: 50%;
33 left: 50%;
34 transform: translate(-50%, -50%);
35 width: 100px;
36 height: 50px;
37 border-radius: 50%;
38 border: 1px solid white;
39 }
40 </style>
41</head>
42<body>
43 <div class="orbit">
44 <div class="ball"></div>
45 <div class="path"></div>
46 </div>
47 <script>
48 const ball = document.querySelector('.ball');
49 const path = document.querySelector('.path');
50 let angle = 0;
51 function animate() {
52 angle += 1;
53 if (angle > 360) angle = 0;
54 const x = path.offsetWidth / 2 + Math.cos(angle * Math.PI / 180) * path.offsetWidth / 2;
55 const y = path.offsetHeight / 2 + Math.sin(angle * Math.PI / 180) * path.offsetHeight / 2;
56 ball.style.left = `${x}px`;
57 ball.style.top = `${y}px`;
58 requestAnimationFrame(animate);
59 }
60 animate();
61 </script>
62</body>
63</html>