Skip to content

Commit d041c06

Browse files
rivkitoledanoLaurelineP
rivkitoledano
and
LaurelineP
authored
add cosmic-orbit animation (#2977)
* add cosmic-orbit animation * remove png img & remove public/cards.json --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent f580456 commit d041c06

3 files changed

Lines changed: 310 additions & 0 deletions

File tree

‎Art/rivkitoledano-cosmic-orbit/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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>Cosmic Orbit</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="solar-system">
12+
<div class="sun">
13+
<div class="sun-core"></div>
14+
<div class="sun-flare"></div>
15+
</div>
16+
17+
<div class="orbit orbit-1">
18+
<div class="planet planet-1">
19+
<div class="planet-ring"></div>
20+
</div>
21+
</div>
22+
23+
<div class="orbit orbit-2">
24+
<div class="planet planet-2">
25+
<div class="moon"></div>
26+
</div>
27+
</div>
28+
29+
<div class="orbit orbit-3">
30+
<div class="planet planet-3">
31+
<div class="atmosphere"></div>
32+
</div>
33+
</div>
34+
35+
<div class="stars">
36+
<div class="star star-1"></div>
37+
<div class="star star-2"></div>
38+
<div class="star star-3"></div>
39+
<div class="star star-4"></div>
40+
<div class="star star-5"></div>
41+
<div class="star star-6"></div>
42+
</div>
43+
</div>
44+
</div>
45+
</body>
46+
</html>

‎Art/rivkitoledano-cosmic-orbit/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "cosmic-orbit",
3+
"githubHandle": "rivkitoledano"
4+
}

‎Art/rivkitoledano-cosmic-orbit/styles.css‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(135deg, #0c0c2b 0%, #1a1a3e 50%, #0f0f2a 100%);
9+
height: 100vh;
10+
overflow: hidden;
11+
font-family: Arial, sans-serif;
12+
}
13+
14+
.container {
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
height: 100vh;
19+
position: relative;
20+
}
21+
22+
.solar-system {
23+
position: relative;
24+
width: 600px;
25+
height: 600px;
26+
}
27+
28+
/* Sun */
29+
.sun {
30+
position: absolute;
31+
top: 50%;
32+
left: 50%;
33+
transform: translate(-50%, -50%);
34+
width: 80px;
35+
height: 80px;
36+
border-radius: 50%;
37+
background: radial-gradient(circle, #ffeb3b 20%, #ff9800 60%, #ff5722 100%);
38+
box-shadow:
39+
0 0 50px #ffeb3b,
40+
0 0 100px #ff9800,
41+
0 0 150px #ff5722;
42+
animation: sunPulse 4s ease-in-out infinite;
43+
z-index: 10;
44+
}
45+
46+
.sun-core {
47+
position: absolute;
48+
top: 15%;
49+
left: 15%;
50+
width: 70%;
51+
height: 70%;
52+
border-radius: 50%;
53+
background: radial-gradient(circle at 30% 30%, #fff 0%, #ffeb3b 50%);
54+
animation: sunRotate 8s linear infinite;
55+
}
56+
57+
.sun-flare {
58+
position: absolute;
59+
top: -20%;
60+
left: -20%;
61+
width: 140%;
62+
height: 140%;
63+
border-radius: 50%;
64+
background: radial-gradient(circle, transparent 60%, rgba(255, 235, 59, 0.3) 70%, transparent 80%);
65+
animation: sunFlare 6s ease-in-out infinite;
66+
}
67+
68+
/* Orbits */
69+
.orbit {
70+
position: absolute;
71+
top: 50%;
72+
left: 50%;
73+
border: 1px solid rgba(255, 255, 255, 0.1);
74+
border-radius: 50%;
75+
transform: translate(-50%, -50%);
76+
}
77+
78+
.orbit-1 {
79+
width: 200px;
80+
height: 200px;
81+
animation: orbitRotate1 8s linear infinite;
82+
}
83+
84+
.orbit-2 {
85+
width: 320px;
86+
height: 320px;
87+
animation: orbitRotate2 15s linear infinite;
88+
}
89+
90+
.orbit-3 {
91+
width: 450px;
92+
height: 450px;
93+
animation: orbitRotate3 25s linear infinite;
94+
}
95+
96+
/* Planets */
97+
.planet {
98+
position: absolute;
99+
border-radius: 50%;
100+
top: 0;
101+
left: 50%;
102+
transform: translateX(-50%);
103+
}
104+
105+
.planet-1 {
106+
width: 20px;
107+
height: 20px;
108+
background: linear-gradient(45deg, #e91e63 0%, #9c27b0 100%);
109+
box-shadow: 0 0 20px rgba(233, 30, 99, 0.8);
110+
animation: planetSpin 3s linear infinite;
111+
}
112+
113+
.planet-ring {
114+
position: absolute;
115+
top: -5px;
116+
left: -5px;
117+
width: 30px;
118+
height: 30px;
119+
border: 2px solid rgba(156, 39, 176, 0.5);
120+
border-radius: 50%;
121+
animation: ringRotate 2s linear infinite;
122+
}
123+
124+
.planet-2 {
125+
width: 30px;
126+
height: 30px;
127+
background: linear-gradient(45deg, #2196f3 0%, #03a9f4 50%, #00bcd4 100%);
128+
box-shadow: 0 0 25px rgba(33, 150, 243, 0.8);
129+
animation: planetSpin 4s linear infinite reverse;
130+
}
131+
132+
.moon {
133+
position: absolute;
134+
top: -40px;
135+
left: 50%;
136+
transform: translateX(-50%);
137+
width: 8px;
138+
height: 8px;
139+
background: #ffc107;
140+
border-radius: 50%;
141+
box-shadow: 0 0 10px rgba(255, 193, 7, 0.8);
142+
animation: moonOrbit 3s linear infinite;
143+
}
144+
145+
.planet-3 {
146+
width: 35px;
147+
height: 35px;
148+
background: linear-gradient(45deg, #4caf50 0%, #8bc34a 50%, #cddc39 100%);
149+
box-shadow: 0 0 30px rgba(76, 175, 80, 0.8);
150+
animation: planetSpin 5s linear infinite;
151+
}
152+
153+
.atmosphere {
154+
position: absolute;
155+
top: -10px;
156+
left: -10px;
157+
width: 55px;
158+
height: 55px;
159+
border: 3px solid rgba(76, 175, 80, 0.3);
160+
border-radius: 50%;
161+
animation: atmosphereGlow 3s ease-in-out infinite;
162+
}
163+
164+
/* Stars */
165+
.stars {
166+
position: absolute;
167+
top: 0;
168+
left: 0;
169+
width: 100%;
170+
height: 100%;
171+
}
172+
173+
.star {
174+
position: absolute;
175+
width: 3px;
176+
height: 3px;
177+
background: #fff;
178+
border-radius: 50%;
179+
animation: starTwinkle 2s ease-in-out infinite;
180+
}
181+
182+
.star-1 { top: 20%; left: 15%; animation-delay: 0s; }
183+
.star-2 { top: 30%; right: 20%; animation-delay: 0.5s; }
184+
.star-3 { bottom: 25%; left: 25%; animation-delay: 1s; }
185+
.star-4 { top: 60%; right: 15%; animation-delay: 1.5s; }
186+
.star-5 { bottom: 40%; right: 40%; animation-delay: 2s; }
187+
.star-6 { top: 15%; left: 60%; animation-delay: 2.5s; }
188+
189+
/* Animations */
190+
@keyframes sunPulse {
191+
0%, 100% { transform: translate(-50%, -50%) scale(1); }
192+
50% { transform: translate(-50%, -50%) scale(1.1); }
193+
}
194+
195+
@keyframes sunRotate {
196+
0% { transform: rotate(0deg); }
197+
100% { transform: rotate(360deg); }
198+
}
199+
200+
@keyframes sunFlare {
201+
0%, 100% { opacity: 0.3; transform: rotate(0deg) scale(1); }
202+
50% { opacity: 0.6; transform: rotate(180deg) scale(1.2); }
203+
}
204+
205+
@keyframes orbitRotate1 {
206+
0% { transform: translate(-50%, -50%) rotate(0deg); }
207+
100% { transform: translate(-50%, -50%) rotate(360deg); }
208+
}
209+
210+
@keyframes orbitRotate2 {
211+
0% { transform: translate(-50%, -50%) rotate(0deg); }
212+
100% { transform: translate(-50%, -50%) rotate(-360deg); }
213+
}
214+
215+
@keyframes orbitRotate3 {
216+
0% { transform: translate(-50%, -50%) rotate(0deg); }
217+
100% { transform: translate(-50%, -50%) rotate(360deg); }
218+
}
219+
220+
@keyframes planetSpin {
221+
0% { transform: translateX(-50%) rotate(0deg); }
222+
100% { transform: translateX(-50%) rotate(360deg); }
223+
}
224+
225+
@keyframes ringRotate {
226+
0% { transform: rotate(0deg); }
227+
100% { transform: rotate(-360deg); }
228+
}
229+
230+
@keyframes moonOrbit {
231+
0% { transform: translateX(-50%) rotate(0deg) translateY(-40px) rotate(0deg); }
232+
100% { transform: translateX(-50%) rotate(360deg) translateY(-40px) rotate(-360deg); }
233+
}
234+
235+
@keyframes atmosphereGlow {
236+
0%, 100% { opacity: 0.3; transform: scale(1); }
237+
50% { opacity: 0.8; transform: scale(1.1); }
238+
}
239+
240+
@keyframes starTwinkle {
241+
0%, 100% { opacity: 0.3; transform: scale(1); }
242+
50% { opacity: 1; transform: scale(1.5); }
243+
}
244+
245+
/* Responsive Design */
246+
@media (max-width: 768px) {
247+
.solar-system {
248+
width: 400px;
249+
height: 400px;
250+
}
251+
252+
.orbit-1 { width: 150px; height: 150px; }
253+
.orbit-2 { width: 240px; height: 240px; }
254+
.orbit-3 { width: 350px; height: 350px; }
255+
256+
.sun {
257+
width: 60px;
258+
height: 60px;
259+
}
260+
}

0 commit comments

Comments
 (0)