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" />
6<title>Orbit Loop Animation</title>
7<style>
8 :root{
9 --bg:#4a4748;
10 --white:#f7f7f7;
11 --w:326px; /* ellipse width */
12 --h:84px; /* ellipse height */
13 --ball:38px; /* dot size */
14 --dur:2.2s;
15 }
16
17 html,body{
18 margin:0;
19 width:100%;
20 height:100%;
21 overflow:hidden;
22 background:var(--bg);
23 }
24
25 body{
26 display:grid;
27 place-items:center;
28 }
29
30 .scene{
31 position:relative;
32 width:420px;
33 height:220px;
34 }
35
36 .ring{
37 position:absolute;
38 left:50%;
39 top:50%;
40 width:var(--w);
41 height:var(--h);
42 transform:translate(-50%,-50%);
43 border:1.5px solid rgba(255,255,255,.96);
44 border-radius:50%;
45 box-sizing:border-box;
46 }
47
48 .orbiter{
49 position:absolute;
50 left:50%;
51 top:50%;
52 width:var(--w);
53 height:var(--h);
54 transform:translate(-50%,-50%);
55 animation:spin var(--dur) linear infinite;
56 }
57
58 .ball{
59 position:absolute;
60 left:100%;
61 top:50%;
62 width:var(--ball);
63 height:var(--ball);
64 margin-left:calc(var(--ball) / -2);
65 margin-top:calc(var(--ball) / -2);
66 border-radius:50%;
67 background:var(--white);
68 box-shadow:
69 0 0 0 1px rgba(255,255,255,.15),
70 0 0 6px rgba(255,255,255,.12);
71 }
72
73 @keyframes spin{
74 from{ transform:translate(-50%,-50%) rotate(0deg); }
75 to { transform:translate(-50%,-50%) rotate(360deg); }
76 }
77</style>
78</head>
79<body>
80 <div class="scene">
81 <div class="ring"></div>
82 <div class="orbiter">
83 <div class="ball"></div>
84 </div>
85 </div>
86</body>
87</html>