Skip to content

Commit 98cc7f1

Browse files
aayush105aayush105
authored
Merge pull request #892 from AKRITI-ENG/spaceship-only
Spaceship
2 parents 4fa7eb0 + 2c0fa92 commit 98cc7f1

File tree

3 files changed

+367
-0
lines changed

3 files changed

+367
-0
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
107107
- [Star Wars Intro](#star-wars-intro)
108108
- [Switch](#switch)
109109
- [Social Media Icons](#social-icons)
110+
- [Spaceship](#spaceship)
110111
- [Tables](#css-tables)
111112
- [Tabs](#tabs)
112113
- [MakemyTrip](#mmt)
@@ -1077,6 +1078,14 @@ A modern, interactive scroll-driven video animation created with pure CSS. Featu
10771078

10781079
---
10791080

1081+
## <a id="Spaceship"></a>Spaceship
1082+
1083+
![img_source](Spaceship/Spaceship.gif)
1084+
1085+
**[⬆ back to top](#quick-links)**
1086+
1087+
---
1088+
10801089
## <a id="RadialPulsar"></a>Radial Color Puslar
10811090

10821091
[<img src="Radial Color Pulsar/Radial.png" title="Demo">](<[https://codepen.io/eduardoboucas/pen/BNyKwO](https://codepen.io/Aman-Pathan-the-typescripter/pen/MWLYNNx)>)

‎Spaceship/Spaceship.gif‎

500 KB
Loading

‎Spaceship/spaceship.html‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
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>Spaceship - Pure CSS</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
height: 100vh;
16+
background: linear-gradient(to bottom, #000428, #004e92);
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
overflow: hidden;
21+
position: relative;
22+
}
23+
24+
/* Animated Stars Background */
25+
.stars {
26+
position: absolute;
27+
width: 100%;
28+
height: 100%;
29+
overflow: hidden;
30+
}
31+
32+
.stars::before,
33+
.stars::after {
34+
content: '';
35+
position: absolute;
36+
width: 2px;
37+
height: 2px;
38+
background: white;
39+
box-shadow:
40+
100px 200px white, 300px 100px white, 500px 300px white,
41+
700px 150px white, 200px 400px white, 600px 250px white,
42+
150px 500px white, 450px 450px white, 800px 400px white,
43+
250px 150px white, 550px 50px white, 350px 350px white,
44+
50px 100px white, 650px 500px white, 900px 200px white,
45+
400px 600px white, 750px 100px white, 100px 350px white,
46+
850px 550px white, 950px 300px white, 200px 50px white,
47+
500px 150px white, 300px 450px white, 700px 350px white,
48+
150px 250px white, 450px 200px white, 600px 450px white,
49+
800px 150px white, 250px 550px white, 550px 350px white;
50+
animation: twinkle 3s infinite alternate;
51+
}
52+
53+
.stars::after {
54+
animation-delay: 1.5s;
55+
box-shadow:
56+
180px 280px white, 380px 180px white, 580px 380px white,
57+
780px 230px white, 280px 480px white, 680px 330px white,
58+
230px 580px white, 530px 530px white, 880px 480px white,
59+
330px 230px white, 630px 130px white, 430px 430px white,
60+
130px 180px white, 730px 580px white, 980px 280px white,
61+
480px 680px white, 830px 180px white, 180px 430px white,
62+
930px 630px white, 1030px 380px white, 280px 130px white,
63+
580px 230px white, 380px 530px white, 780px 430px white;
64+
}
65+
66+
@keyframes twinkle {
67+
0%, 100% { opacity: 0.3; }
68+
50% { opacity: 1; }
69+
}
70+
71+
/* Spaceship Container */
72+
.spaceship-container {
73+
position: relative;
74+
animation: float 6s ease-in-out infinite;
75+
}
76+
77+
@keyframes float {
78+
0%, 100% { transform: translateY(0px) rotate(-5deg); }
79+
50% { transform: translateY(-20px) rotate(5deg); }
80+
}
81+
82+
/* Main Spaceship Body */
83+
.spaceship {
84+
position: relative;
85+
width: 200px;
86+
height: 300px;
87+
}
88+
89+
/* Cockpit/Top */
90+
.cockpit {
91+
position: absolute;
92+
top: 20px;
93+
left: 50%;
94+
transform: translateX(-50%);
95+
width: 80px;
96+
height: 80px;
97+
background: linear-gradient(135deg, #00d4ff, #0066cc);
98+
border-radius: 50% 50% 20px 20px;
99+
border: 3px solid #003d66;
100+
box-shadow:
101+
inset 0 -20px 30px rgba(0, 100, 200, 0.5),
102+
0 0 30px rgba(0, 212, 255, 0.6);
103+
animation: cockpitGlow 2s ease-in-out infinite alternate;
104+
}
105+
106+
@keyframes cockpitGlow {
107+
0%, 100% { box-shadow: inset 0 -20px 30px rgba(0, 100, 200, 0.5), 0 0 30px rgba(0, 212, 255, 0.6); }
108+
50% { box-shadow: inset 0 -20px 30px rgba(0, 150, 255, 0.7), 0 0 50px rgba(0, 212, 255, 0.9); }
109+
}
110+
111+
/* Window Detail */
112+
.window {
113+
position: absolute;
114+
top: 30px;
115+
left: 50%;
116+
transform: translateX(-50%);
117+
width: 35px;
118+
height: 35px;
119+
background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
120+
border-radius: 50%;
121+
border: 2px solid rgba(255, 255, 255, 0.2);
122+
}
123+
124+
/* Main Body */
125+
.body {
126+
position: absolute;
127+
top: 90px;
128+
left: 50%;
129+
transform: translateX(-50%);
130+
width: 120px;
131+
height: 140px;
132+
background: linear-gradient(180deg, #4a5568, #2d3748);
133+
border-radius: 10px;
134+
border: 3px solid #1a202c;
135+
box-shadow:
136+
inset 0 -20px 40px rgba(0, 0, 0, 0.5),
137+
0 0 20px rgba(0, 0, 0, 0.3);
138+
}
139+
140+
/* Body Panels */
141+
.panel {
142+
position: absolute;
143+
width: 30px;
144+
height: 60px;
145+
background: linear-gradient(90deg, #2d3748, #1a202c);
146+
border: 1px solid #4a5568;
147+
border-radius: 3px;
148+
top: 40px;
149+
}
150+
151+
.panel-left {
152+
left: 10px;
153+
}
154+
155+
.panel-right {
156+
right: 10px;
157+
}
158+
159+
/* Indicator Lights */
160+
.light {
161+
position: absolute;
162+
width: 8px;
163+
height: 8px;
164+
background: #ff0000;
165+
border-radius: 50%;
166+
top: 20px;
167+
left: 50%;
168+
transform: translateX(-50%);
169+
box-shadow: 0 0 10px #ff0000;
170+
animation: blink 1s infinite;
171+
}
172+
173+
@keyframes blink {
174+
0%, 49% { opacity: 1; }
175+
50%, 100% { opacity: 0.2; }
176+
}
177+
178+
.light-green {
179+
background: #00ff00;
180+
box-shadow: 0 0 10px #00ff00;
181+
top: 35px;
182+
animation-delay: 0.5s;
183+
}
184+
185+
/* Wings */
186+
.wing {
187+
position: absolute;
188+
top: 140px;
189+
width: 80px;
190+
height: 60px;
191+
background: linear-gradient(135deg, #4a5568, #2d3748);
192+
border: 3px solid #1a202c;
193+
clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 80%);
194+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
195+
}
196+
197+
.wing-left {
198+
left: -70px;
199+
transform: scaleX(-1);
200+
}
201+
202+
.wing-right {
203+
right: -70px;
204+
}
205+
206+
/* Wing Lights */
207+
.wing-light {
208+
position: absolute;
209+
width: 10px;
210+
height: 10px;
211+
background: #00ff00;
212+
border-radius: 50%;
213+
top: 25px;
214+
right: 15px;
215+
box-shadow: 0 0 15px #00ff00;
216+
animation: blink 1.5s infinite;
217+
}
218+
219+
/* Engines */
220+
.engine-container {
221+
position: absolute;
222+
bottom: -50px;
223+
left: 50%;
224+
transform: translateX(-50%);
225+
width: 140px;
226+
display: flex;
227+
justify-content: space-around;
228+
}
229+
230+
.engine {
231+
width: 35px;
232+
height: 50px;
233+
background: linear-gradient(180deg, #2d3748, #1a202c);
234+
border: 2px solid #4a5568;
235+
border-radius: 5px 5px 50% 50%;
236+
position: relative;
237+
overflow: hidden;
238+
}
239+
240+
/* Engine Glow */
241+
.engine-glow {
242+
position: absolute;
243+
bottom: 0;
244+
left: 50%;
245+
transform: translateX(-50%);
246+
width: 30px;
247+
height: 60px;
248+
background: linear-gradient(to bottom,
249+
transparent,
250+
rgba(255, 140, 0, 0.8),
251+
rgba(255, 69, 0, 0.9),
252+
rgba(255, 0, 0, 1));
253+
border-radius: 50%;
254+
filter: blur(5px);
255+
animation: enginePulse 0.3s ease-in-out infinite alternate;
256+
}
257+
258+
@keyframes enginePulse {
259+
0% {
260+
height: 60px;
261+
opacity: 1;
262+
}
263+
100% {
264+
height: 80px;
265+
opacity: 0.7;
266+
}
267+
}
268+
269+
/* Exhaust Trail */
270+
.exhaust {
271+
position: absolute;
272+
bottom: -100px;
273+
left: 50%;
274+
transform: translateX(-50%);
275+
width: 100px;
276+
height: 100px;
277+
background: radial-gradient(ellipse at top,
278+
rgba(255, 140, 0, 0.5),
279+
rgba(255, 69, 0, 0.3),
280+
transparent);
281+
border-radius: 50%;
282+
filter: blur(10px);
283+
animation: exhaustFlow 0.5s ease-in-out infinite;
284+
}
285+
286+
@keyframes exhaustFlow {
287+
0% {
288+
transform: translateX(-50%) translateY(0) scale(1);
289+
opacity: 0.8;
290+
}
291+
100% {
292+
transform: translateX(-50%) translateY(20px) scale(1.5);
293+
opacity: 0;
294+
}
295+
}
296+
297+
/* Title */
298+
.title {
299+
position: absolute;
300+
top: 50px;
301+
left: 50%;
302+
transform: translateX(-50%);
303+
color: #00d4ff;
304+
font-family: 'Arial', sans-serif;
305+
font-size: 2.5em;
306+
font-weight: bold;
307+
text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
308+
letter-spacing: 3px;
309+
}
310+
</style>
311+
</head>
312+
<body>
313+
<div class="stars"></div>
314+
315+
<div class="title">SPACESHIP</div>
316+
317+
<div class="spaceship-container">
318+
<div class="spaceship">
319+
<!-- Cockpit -->
320+
<div class="cockpit">
321+
<div class="window"></div>
322+
</div>
323+
324+
<!-- Main Body -->
325+
<div class="body">
326+
<div class="panel panel-left"></div>
327+
<div class="panel panel-right"></div>
328+
<div class="light"></div>
329+
<div class="light light-green"></div>
330+
</div>
331+
332+
<!-- Wings -->
333+
<div class="wing wing-left">
334+
<div class="wing-light"></div>
335+
</div>
336+
<div class="wing wing-right">
337+
<div class="wing-light"></div>
338+
</div>
339+
340+
<!-- Engines -->
341+
<div class="engine-container">
342+
<div class="engine">
343+
<div class="engine-glow"></div>
344+
</div>
345+
<div class="engine">
346+
<div class="engine-glow"></div>
347+
</div>
348+
<div class="engine">
349+
<div class="engine-glow"></div>
350+
</div>
351+
</div>
352+
353+
<!-- Exhaust Trail -->
354+
<div class="exhaust"></div>
355+
</div>
356+
</div>
357+
</body>
358+
</html>

0 commit comments

Comments
 (0)