-
Notifications
You must be signed in to change notification settings - Fork 0
/
orbital.html
47 lines (41 loc) · 1.2 KB
/
orbital.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html>
<head>
<style>
body { margin: 0; padding: 0; background-color: #000; color: #fff; }
@keyframes orbital_anim {
0% { transform: rotate(000deg); }
100% { transform: rotate(360deg); }
}
orbital {
display: block;
position: absolute; left: 50%; top: 50%;
width: 100px; height: 100px; margin: -80px 0 0 -50px;
animation: 60s linear 0s infinite orbital_anim;
}
orbital > * { position: absolute; width: 100%; height: 100%; display: block; }
orbital > *:before { position: absolute; width: 100%; height: 100%;
content: " ";
box-sizing: border-box;
border: solid #fff;
border-width: 3px 0px 0px 0px;
border-radius: 50%;
box-shadow: inset 0 10px 10px -2px rgba(255,255,255,0.4);
animation: 3s linear 0s infinite orbital_anim;
}
orbital > l1 { transform: rotate(000deg) scaleX(0.3); }
orbital > l2 { transform: rotate(060deg) scaleX(0.3); }
orbital > l3 { transform: rotate(120deg) scaleX(0.3); }
orbital > l1:before { animation-delay: -0.0s; }
orbital > l2:before { animation-delay: -0.5s; }
orbital > l3:before { animation-delay: -1.0s; }
</style>
</head>
<body>
<orbital>
<l1></l1>
<l2></l2>
<l3></l3>
</orbital>
</body>
</html>