Skip to content

Commit 5119018

Browse files
Shravan250Shravan250
authored
Day night cycle (#2921)
* Create index.html created folder and html file * Create styles.css added styles.css file * Create meta.json * Update index.html added html * Update styles.css added styles * Update meta.json * update foldername Shravan250-Day_Night_Cycle * Delete Art/Shravan250-Day_Night_Cycle * Delete Art/Shravan-Day-Night-Cycle directory * Added Shravan250-Day_Night_Cycle
1 parent 45ba9eb commit 5119018

File tree

3 files changed

+337
-0
lines changed

3 files changed

+337
-0
lines changed

‎Art/Shravan250-Day_Night_Cycle/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>Day to Night Animation</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="scene-container">
12+
<div class="scene">
13+
<div class="sun"></div>
14+
<div class="moon"></div>
15+
<div class="cloud one"></div>
16+
<div class="cloud two"></div>
17+
<div class="mountain"></div>
18+
<div class="trees">
19+
<div class="tree"></div>
20+
<div class="tree"></div>
21+
<div class="tree"></div>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="cat">
26+
<div class="cat-ears-left"></div>
27+
<div class="cat-ears-right"></div>
28+
<div class="cat-head"></div>
29+
<div class="cat-neck"></div>
30+
<div class="cat-body"></div>
31+
</div>
32+
</div>
33+
<div class="bottom-support"></div>
34+
</body>
35+
</html>

‎Art/Shravan250-Day_Night_Cycle/meta.json‎

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

‎Art/Shravan250-Day_Night_Cycle/styles.css‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
html {
7+
height: 100%;
8+
overflow: hidden;
9+
font-family: sans-serif;
10+
}
11+
body {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
height: 100vh;
17+
width: 100%;
18+
font-family: Arial, sans-serif;
19+
text-align: center;
20+
transition: background-color 0.5s ease;
21+
}
22+
.container {
23+
background-color: #f8f9fa;
24+
border-radius: 3px;
25+
border: 20px solid burlywood;
26+
border-bottom: 0;
27+
height: 400px;
28+
width: 400px;
29+
max-width: 100%;
30+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
31+
position: relative;
32+
}
33+
34+
.bottom-support {
35+
height: 30px;
36+
width: 450px;
37+
background-color: rgb(255, 170, 60);
38+
transform: translateY(-10px);
39+
}
40+
41+
.scene-container {
42+
background-color: #f8f9fa;
43+
border-radius: 10px;
44+
height: 370px;
45+
width: 370px;
46+
max-width: 100%;
47+
box-shadow: 0 0 10px rgba(83, 10, 10, 0.2);
48+
position: relative;
49+
}
50+
51+
.scene {
52+
position: relative;
53+
width: 100%;
54+
height: 100%;
55+
animation: bgAnimation 30s linear infinite;
56+
}
57+
@keyframes bgAnimation {
58+
0% {
59+
background: radial-gradient(circle at top center, #a0d8f1, #e0f7fa);
60+
}
61+
25% {
62+
background: radial-gradient(circle at center, #ffd54f, #fff9c4);
63+
}
64+
50% {
65+
background: radial-gradient(circle at top right, #1a237e, #0d47a1);
66+
}
67+
75% {
68+
background: radial-gradient(circle at bottom center, #ffccbc, #f8bbd0);
69+
}
70+
100% {
71+
background: radial-gradient(circle at top center, #a0d8f1, #e0f7fa);
72+
}
73+
}
74+
.sun {
75+
position: absolute;
76+
width: 80px;
77+
height: 80px;
78+
background: #ffeb3b;
79+
border-radius: 50%;
80+
box-shadow: 0 0 30px 10px rgba(255, 235, 59, 0.6);
81+
animation: sunAnimation 25s ease-in-out infinite;
82+
}
83+
@keyframes sunAnimation {
84+
0%,
85+
100% {
86+
left: 10%;
87+
top: 90%;
88+
opacity: 0;
89+
transform: scale(0.5);
90+
}
91+
10% {
92+
opacity: 1;
93+
transform: scale(1);
94+
}
95+
25% {
96+
left: 40%;
97+
top: 40%;
98+
opacity: 1;
99+
}
100+
40% {
101+
left: 50%;
102+
top: 30%;
103+
opacity: 1;
104+
}
105+
50% {
106+
opacity: 0;
107+
}
108+
}
109+
.moon {
110+
position: absolute;
111+
width: 60px;
112+
height: 60px;
113+
background: #f5f3ce;
114+
border-radius: 50%;
115+
box-shadow: 0 0 20px 5px rgba(245, 243, 206, 0.8);
116+
animation: moonAnimation 25s ease-in-out infinite;
117+
}
118+
@keyframes moonAnimation {
119+
0%,
120+
45% {
121+
right: 60%;
122+
top: 30%;
123+
opacity: 0;
124+
transform: scale(0.5);
125+
}
126+
55% {
127+
right: 30%;
128+
top: 50%;
129+
opacity: 1;
130+
transform: scale(1);
131+
}
132+
75% {
133+
right: 20%;
134+
top: 70%;
135+
opacity: 1;
136+
}
137+
90% {
138+
right: 10%;
139+
top: 90%;
140+
opacity: 1;
141+
}
142+
}
143+
.cloud {
144+
position: absolute;
145+
background: #ffffff;
146+
border-radius: 50%;
147+
opacity: 0.8;
148+
animation: cloudAnimation 30s linear infinite;
149+
}
150+
.cloud.one {
151+
width: 100px;
152+
height: 60px;
153+
top: 20%;
154+
left: 10%;
155+
}
156+
.cloud.two {
157+
width: 80px;
158+
height: 50px;
159+
top: 40%;
160+
left: 60%;
161+
animation-delay: 5s;
162+
}
163+
@keyframes cloudAnimation {
164+
0%,
165+
100% {
166+
transform: translateX(0);
167+
}
168+
50% {
169+
transform: translateX(50px);
170+
}
171+
}
172+
.mountain {
173+
position: absolute;
174+
bottom: 0;
175+
left: 0;
176+
width: 100%;
177+
height: 40%;
178+
background: #66bb6a;
179+
clip-path: polygon(0 100%, 25% 60%, 50% 100%, 75% 65%, 100% 100%);
180+
animation: mountainAnimation 30s linear infinite;
181+
}
182+
@keyframes mountainAnimation {
183+
0%,
184+
100% {
185+
filter: brightness(1.1);
186+
}
187+
25% {
188+
filter: brightness(1);
189+
}
190+
50% {
191+
filter: brightness(0.7);
192+
}
193+
75% {
194+
filter: brightness(0.9);
195+
}
196+
}
197+
.trees {
198+
position: absolute;
199+
bottom: 10%;
200+
left: 70%;
201+
display: flex;
202+
gap: 10px;
203+
animation: treeAnimation 30s linear infinite;
204+
}
205+
.tree {
206+
width: 20px;
207+
height: 40px;
208+
background: #388e3c;
209+
clip-path: polygon(50% 0%, 100% 60%, 0 60%);
210+
}
211+
@keyframes treeAnimation {
212+
0%,
213+
100% {
214+
filter: brightness(1.1);
215+
}
216+
25% {
217+
filter: brightness(1);
218+
}
219+
50% {
220+
filter: brightness(0.7);
221+
}
222+
75% {
223+
filter: brightness(0.9);
224+
}
225+
}
226+
227+
.cat {
228+
position: absolute;
229+
width: 100px;
230+
height: 130px;
231+
inset: auto 0 10px auto;
232+
}
233+
234+
.cat-ears-left {
235+
position: absolute;
236+
height: 20px;
237+
width: 15px;
238+
inset: 0 auto auto 10px;
239+
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
240+
background-color: black;
241+
}
242+
243+
.cat-ears-right {
244+
position: absolute;
245+
height: 20px;
246+
width: 15px;
247+
inset: 0 auto auto 35px;
248+
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
249+
background-color: black;
250+
}
251+
252+
.cat-head {
253+
position: absolute;
254+
height: 35px;
255+
width: 60px;
256+
inset: 15px auto auto 0;
257+
background-color: black;
258+
clip-path: circle(50% at 50% 50%);
259+
}
260+
.cat-neck {
261+
position: absolute;
262+
height: 60px;
263+
width: 70px;
264+
inset: 45px auto auto 10px;
265+
background-color: black;
266+
clip-path: polygon(
267+
58% 0,
268+
63% 12%,
269+
68% 19%,
270+
76% 28%,
271+
76% 100%,
272+
34% 100%,
273+
17% 77%,
274+
7% 54%,
275+
2% 28%,
276+
0 0
277+
);
278+
}
279+
280+
.cat-body {
281+
position: absolute;
282+
height: 75px;
283+
width: 75px;
284+
inset: 55px 0px auto auto;
285+
background-color: black;
286+
clip-path: polygon(
287+
50% 0%,
288+
70% 7%,
289+
90% 19%,
290+
100% 29%,
291+
100% 100%,
292+
50% 100%,
293+
19% 100%,
294+
10% 72%,
295+
0% 35%,
296+
0 0
297+
);
298+
}

0 commit comments

Comments
 (0)