Skip to content

Commit aa5125a

Browse files
amaltscariaamaltscaria
authored
Cosmic css (#2906)
* Feat: Add cosmic_css animation * Feat: add cosmic_css animation
1 parent e441b2e commit aa5125a

3 files changed

Lines changed: 250 additions & 0 deletions

File tree

‎Art/amaltscaria-cosmic_css/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Super Rocket Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<div class="scene">
12+
<div class="stars"></div>
13+
<div class="platform"></div>
14+
<div class="rocket">
15+
<div class="rocket-body">
16+
<div class="window"></div>
17+
<div class="fins">
18+
<div class="fin left"></div>
19+
<div class="fin right"></div>
20+
</div>
21+
</div>
22+
<div class="flame"></div>
23+
</div>
24+
<div class="smoke">
25+
<span></span>
26+
<span></span>
27+
<span></span>
28+
</div>
29+
</div>
30+
</div>
31+
</body>
32+
</html>

‎Art/amaltscaria-cosmic_css/meta.json‎

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

‎Art/amaltscaria-cosmic_css/styles.css‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
/* Center alignment */
2+
body {
3+
margin: 0;
4+
min-height: 100vh;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
background: #000;
9+
}
10+
11+
.wrapper {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
width: 100%;
16+
}
17+
18+
/* Scene Setup */
19+
.scene {
20+
width: 400px;
21+
height: 600px;
22+
background: linear-gradient(to bottom, #0a1128 0%, #1a237e 100%);
23+
position: relative;
24+
overflow: hidden;
25+
}
26+
27+
/* Stars */
28+
.stars {
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
34+
.stars::before {
35+
content: '';
36+
position: absolute;
37+
width: 2px;
38+
height: 2px;
39+
background: white;
40+
box-shadow:
41+
20px 30px white,
42+
60px 50px white,
43+
100px 20px white,
44+
140px 70px white,
45+
180px 40px white,
46+
220px 60px white,
47+
260px 30px white,
48+
300px 50px white,
49+
340px 20px white,
50+
380px 40px white,
51+
40px 80px white,
52+
80px 100px white,
53+
120px 90px white,
54+
160px 120px white,
55+
200px 80px white,
56+
240px 100px white,
57+
280px 90px white,
58+
320px 110px white,
59+
360px 80px white,
60+
30px 150px white;
61+
animation: twinkle 2s infinite;
62+
}
63+
64+
/* Launch Platform */
65+
.platform {
66+
width: 200px;
67+
height: 20px;
68+
background: #455a64;
69+
position: absolute;
70+
bottom: 50px;
71+
left: 50%;
72+
transform: translateX(-50%);
73+
}
74+
75+
/* Rocket */
76+
.rocket {
77+
width: 40px;
78+
height: 120px;
79+
position: absolute;
80+
bottom: 70px;
81+
left: 50%;
82+
transform: translateX(-50%);
83+
animation: launch 4s infinite;
84+
}
85+
86+
.rocket-body {
87+
width: 40px;
88+
height: 80px;
89+
background: #f44336;
90+
border-radius: 50% 50% 0 0;
91+
position: relative;
92+
}
93+
94+
.window {
95+
width: 15px;
96+
height: 15px;
97+
background: #90caf9;
98+
border-radius: 50%;
99+
position: absolute;
100+
top: 30px;
101+
left: 50%;
102+
transform: translateX(-50%);
103+
}
104+
105+
.fins {
106+
position: absolute;
107+
bottom: 0;
108+
}
109+
110+
.fin {
111+
width: 20px;
112+
height: 30px;
113+
background: #d32f2f;
114+
position: absolute;
115+
bottom: 0;
116+
}
117+
118+
.fin.left {
119+
left: -20px;
120+
transform: skewY(45deg);
121+
}
122+
123+
.fin.right {
124+
right: -20px;
125+
transform: skewY(-45deg);
126+
}
127+
128+
/* Flame */
129+
.flame {
130+
width: 30px;
131+
height: 60px;
132+
background: linear-gradient(to bottom, #f57f17, #ffeb3b);
133+
position: absolute;
134+
bottom: -60px;
135+
left: 50%;
136+
transform: translateX(-50%);
137+
border-radius: 0 0 20px 20px;
138+
animation: flicker 0.2s infinite;
139+
}
140+
141+
/* Smoke */
142+
.smoke {
143+
position: absolute;
144+
bottom: 0;
145+
left: 50%;
146+
transform: translateX(-50%);
147+
}
148+
149+
.smoke span {
150+
width: 20px;
151+
height: 20px;
152+
background: rgba(255, 255, 255, 0.3);
153+
border-radius: 50%;
154+
position: absolute;
155+
animation: smoke 2s infinite;
156+
}
157+
158+
.smoke span:nth-child(1) { animation-delay: 0.2s; }
159+
.smoke span:nth-child(2) { animation-delay: 0.4s; }
160+
.smoke span:nth-child(3) { animation-delay: 0.6s; }
161+
162+
/* Animations */
163+
@keyframes launch {
164+
0% {
165+
transform: translateX(-50%) translateY(0);
166+
}
167+
10% {
168+
transform: translateX(-50%) translateY(-5px);
169+
}
170+
30% {
171+
transform: translateX(-50%) translateY(-100px);
172+
}
173+
100% {
174+
transform: translateX(-50%) translateY(-600px);
175+
}
176+
}
177+
178+
@keyframes flicker {
179+
0%, 100% {
180+
transform: translateX(-50%) scaleY(1);
181+
}
182+
50% {
183+
transform: translateX(-50%) scaleY(1.1);
184+
}
185+
}
186+
187+
@keyframes smoke {
188+
0% {
189+
transform: translateY(0) scale(1);
190+
opacity: 0.5;
191+
}
192+
100% {
193+
transform: translateY(-100px) scale(3);
194+
opacity: 0;
195+
}
196+
}
197+
198+
@keyframes twinkle {
199+
0%, 100% {
200+
opacity: 0.3;
201+
}
202+
50% {
203+
opacity: 1;
204+
}
205+
}
206+
207+
/* Responsive Design */
208+
@media (max-width: 500px) {
209+
.scene {
210+
width: 300px;
211+
height: 450px;
212+
}
213+
}

0 commit comments

Comments
 (0)