Skip to content

Commit 69d8558

Browse files
Lakshya182005Lakshya182005
authored
add Sun to moon (#3258)
1 parent 9faf454 commit 69d8558

3 files changed

Lines changed: 207 additions & 0 deletions

File tree

‎Art/Lakshya182005_Sun_to_moon/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Sun to Moon and Back</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="sky">
11+
<div class="celestial-body">
12+
<div class="sun">
13+
<div class="ray ray1"></div>
14+
<div class="ray ray2"></div>
15+
<div class="ray ray3"></div>
16+
<div class="ray ray4"></div>
17+
<div class="ray ray5"></div>
18+
<div class="ray ray6"></div>
19+
<div class="ray ray7"></div>
20+
<div class="ray ray8"></div>
21+
</div>
22+
<div class="moon">
23+
<div class="crater crater1"></div>
24+
<div class="crater crater2"></div>
25+
<div class="crater crater3"></div>
26+
</div>
27+
</div>
28+
<div class="star star1"></div>
29+
<div class="star star2"></div>
30+
<div class="star star3"></div>
31+
<div class="star star4"></div>
32+
<div class="star star5"></div>
33+
</div>
34+
</body>
35+
</html>

‎Art/Lakshya182005_Sun_to_moon/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Sun to Moon and Back",
3+
"githubHandle": "Lakshya182005"
4+
}

‎Art/Lakshya182005_Sun_to_moon/styles.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
overflow: hidden;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.sky {
16+
width: 100%;
17+
height: 100%;
18+
position: relative;
19+
animation: skyChange 8s ease-in-out infinite;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.celestial-body {
26+
position: relative;
27+
width: 200px;
28+
height: 200px;
29+
}
30+
31+
.sun {
32+
position: absolute;
33+
width: 120px;
34+
height: 120px;
35+
background: radial-gradient(circle, #ffd700 0%, #ffa500 100%);
36+
border-radius: 50%;
37+
top: 40px;
38+
left: 40px;
39+
animation: fadeInOut 8s ease-in-out infinite;
40+
box-shadow: 0 0 60px rgba(255, 215, 0, 0.8),
41+
0 0 100px rgba(255, 165, 0, 0.6);
42+
}
43+
44+
.ray {
45+
position: absolute;
46+
width: 4px;
47+
height: 30px;
48+
background: linear-gradient(to bottom, #ffd700 0%, transparent 100%);
49+
top: 50%;
50+
left: 50%;
51+
transform-origin: center -30px;
52+
animation: rotate 4s linear infinite;
53+
}
54+
55+
.ray1 { transform: rotate(0deg); }
56+
.ray2 { transform: rotate(45deg); }
57+
.ray3 { transform: rotate(90deg); }
58+
.ray4 { transform: rotate(135deg); }
59+
.ray5 { transform: rotate(180deg); }
60+
.ray6 { transform: rotate(225deg); }
61+
.ray7 { transform: rotate(270deg); }
62+
.ray8 { transform: rotate(315deg); }
63+
64+
.moon {
65+
position: absolute;
66+
width: 120px;
67+
height: 120px;
68+
background: radial-gradient(circle at 30% 30%, #f0f0f0 0%, #c0c0c0 100%);
69+
border-radius: 50%;
70+
top: 40px;
71+
left: 40px;
72+
animation: fadeOutIn 8s ease-in-out infinite;
73+
box-shadow: 0 0 40px rgba(200, 200, 200, 0.6),
74+
inset -10px -10px 20px rgba(0, 0, 0, 0.1);
75+
}
76+
77+
.crater {
78+
position: absolute;
79+
background: radial-gradient(circle, #a8a8a8 0%, #c0c0c0 100%);
80+
border-radius: 50%;
81+
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
82+
}
83+
84+
.crater1 {
85+
width: 20px;
86+
height: 20px;
87+
top: 30px;
88+
left: 40px;
89+
}
90+
91+
.crater2 {
92+
width: 15px;
93+
height: 15px;
94+
top: 60px;
95+
left: 70px;
96+
}
97+
98+
.crater3 {
99+
width: 12px;
100+
height: 12px;
101+
top: 50px;
102+
left: 25px;
103+
}
104+
105+
.star {
106+
position: absolute;
107+
width: 3px;
108+
height: 3px;
109+
background: white;
110+
border-radius: 50%;
111+
animation: starTwinkle 8s ease-in-out infinite;
112+
box-shadow: 0 0 4px white;
113+
}
114+
115+
.star1 { top: 20%; left: 15%; animation-delay: 0s; }
116+
.star2 { top: 30%; left: 80%; animation-delay: 1s; }
117+
.star3 { top: 60%; left: 20%; animation-delay: 2s; }
118+
.star4 { top: 70%; left: 75%; animation-delay: 1.5s; }
119+
.star5 { top: 40%; left: 50%; animation-delay: 0.5s; }
120+
121+
@keyframes skyChange {
122+
0%, 100% {
123+
background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
124+
}
125+
50% {
126+
background: linear-gradient(to bottom, #0c1445 0%, #1a237e 100%);
127+
}
128+
}
129+
130+
@keyframes fadeInOut {
131+
0%, 100% {
132+
opacity: 1;
133+
transform: scale(1);
134+
}
135+
50% {
136+
opacity: 0;
137+
transform: scale(0.8);
138+
}
139+
}
140+
141+
@keyframes fadeOutIn {
142+
0%, 100% {
143+
opacity: 0;
144+
transform: scale(0.8);
145+
}
146+
50% {
147+
opacity: 1;
148+
transform: scale(1);
149+
}
150+
}
151+
152+
@keyframes rotate {
153+
0% {
154+
transform: rotate(0deg);
155+
}
156+
100% {
157+
transform: rotate(360deg);
158+
}
159+
}
160+
161+
@keyframes starTwinkle {
162+
0%, 40%, 100% {
163+
opacity: 0;
164+
}
165+
50%, 90% {
166+
opacity: 1;
167+
}
168+
}

0 commit comments

Comments
 (0)