Skip to content

Commit 78502f5

Browse files
tushars-codetushars-code
authored
Added NASA Rocket launch animation by tusharyerne (#2969)
* Added NASA Rocket launch animation by tusharyerne * ✅ Update meta.json with correct GitHub handle - tushars-code
1 parent 014842c commit 78502f5

3 files changed

Lines changed: 139 additions & 0 deletions

File tree

‎Art/tusharyerne-NASARocket/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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>NASA Rocket Launch</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="sky">
11+
<div class="stars"></div>
12+
13+
<div class="nasa-text">🧑‍🚀NASA</div>
14+
15+
<div class="rocket">
16+
<div class="body">
17+
<div class="window"></div>
18+
</div>
19+
<div class="flame"></div>
20+
</div>
21+
</div>
22+
</body>
23+
</html>

‎Art/tusharyerne-NASARocket/meta.json‎

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

‎Art/tusharyerne-NASARocket/styles.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background: #000;
5+
overflow: hidden;
6+
font-family: 'Arial', sans-serif;
7+
}
8+
9+
.sky {
10+
position: relative;
11+
width: 100vw;
12+
height: 100vh;
13+
background: linear-gradient(#000010, #001133);
14+
}
15+
16+
.stars {
17+
position: absolute;
18+
width: 100%;
19+
height: 100%;
20+
background: radial-gradient(white 1px, transparent 1px);
21+
background-size: 20px 20px;
22+
opacity: 0.5;
23+
z-index: 0;
24+
}
25+
26+
.nasa-text {
27+
position: absolute;
28+
top: 20%;
29+
left: 50%;
30+
transform: translate(-50%, -50%);
31+
font-size: 60px;
32+
color: white;
33+
font-weight: bold;
34+
text-shadow: 0 0 20px #00f;
35+
opacity: 0;
36+
animation: showNASA 1.5s ease-out 2s forwards;
37+
letter-spacing: 10px;
38+
z-index: 10;
39+
}
40+
41+
@keyframes showNASA {
42+
0% {
43+
opacity: 0;
44+
transform: translate(-50%, -50%) scale(0.5);
45+
}
46+
100% {
47+
opacity: 1;
48+
transform: translate(-50%, -50%) scale(1);
49+
}
50+
}
51+
52+
.rocket {
53+
position: absolute;
54+
bottom: 0;
55+
left: 50%;
56+
transform: translateX(-50%);
57+
animation: launch 5s ease-in-out forwards;
58+
z-index: 5;
59+
}
60+
61+
.body {
62+
width: 60px;
63+
height: 150px;
64+
background: silver;
65+
border-radius: 30px 30px 10px 10px;
66+
position: relative;
67+
}
68+
69+
.window {
70+
width: 20px;
71+
height: 20px;
72+
background: #0ff;
73+
border-radius: 50%;
74+
position: absolute;
75+
top: 30px;
76+
left: 50%;
77+
transform: translateX(-50%);
78+
box-shadow: 0 0 10px #0ff;
79+
}
80+
81+
.flame {
82+
width: 20px;
83+
height: 40px;
84+
background: orange;
85+
position: absolute;
86+
top: 150px;
87+
left: 50%;
88+
transform: translateX(-50%);
89+
border-radius: 50%;
90+
animation: flame 0.3s infinite alternate;
91+
box-shadow: 0 0 20px yellow;
92+
}
93+
94+
@keyframes flame {
95+
0% {
96+
transform: translateX(-50%) scaleY(1);
97+
background: orange;
98+
}
99+
100% {
100+
transform: translateX(-50%) scaleY(1.5);
101+
background: red;
102+
}
103+
}
104+
105+
@keyframes launch {
106+
0% {
107+
bottom: 0;
108+
}
109+
100% {
110+
bottom: 100%;
111+
}
112+
}

0 commit comments

Comments
 (0)