Cosmic css (#2906)

* Feat: Add cosmic_css animation * Feat: add cosmic_css animation
zero-to-mastery · Jan 24, 2025 · aa5125a · aa5125a
1 parent e441b2e
commit aa5125a
Show file tree

Hide file tree

Showing 3 changed files with 250 additions and 0 deletions.
diff --git a/Art/amaltscaria-cosmic_css/index.html b/Art/amaltscaria-cosmic_css/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Super Rocket Animation</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="scene">
+            <div class="stars"></div>
+            <div class="platform"></div>
+            <div class="rocket">
+                <div class="rocket-body">
+                    <div class="window"></div>
+                    <div class="fins">
+                        <div class="fin left"></div>
+                        <div class="fin right"></div>
+                    </div>
+                </div>
+                <div class="flame"></div>
+            </div>
+            <div class="smoke">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Art/amaltscaria-cosmic_css/meta.json b/Art/amaltscaria-cosmic_css/meta.json
@@ -0,0 +1,5 @@
+
+{
+    "artName": "cosmic_css",
+    "githubHandle": "amaltscaria"
+  }
diff --git a/Art/amaltscaria-cosmic_css/styles.css b/Art/amaltscaria-cosmic_css/styles.css
@@ -0,0 +1,213 @@
+/* Center alignment */
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+}
+
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+/* Scene Setup */
+.scene {
+    width: 400px;
+    height: 600px;
+    background: linear-gradient(to bottom, #0a1128 0%, #1a237e 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Stars */
+.stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.stars::before {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    box-shadow: 
+        20px 30px white,
+        60px 50px white,
+        100px 20px white,
+        140px 70px white,
+        180px 40px white,
+        220px 60px white,
+        260px 30px white,
+        300px 50px white,
+        340px 20px white,
+        380px 40px white,
+        40px 80px white,
+        80px 100px white,
+        120px 90px white,
+        160px 120px white,
+        200px 80px white,
+        240px 100px white,
+        280px 90px white,
+        320px 110px white,
+        360px 80px white,
+        30px 150px white;
+    animation: twinkle 2s infinite;
+}
+
+/* Launch Platform */
+.platform {
+    width: 200px;
+    height: 20px;
+    background: #455a64;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Rocket */
+.rocket {
+    width: 40px;
+    height: 120px;
+    position: absolute;
+    bottom: 70px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: launch 4s infinite;
+}
+
+.rocket-body {
+    width: 40px;
+    height: 80px;
+    background: #f44336;
+    border-radius: 50% 50% 0 0;
+    position: relative;
+}
+
+.window {
+    width: 15px;
+    height: 15px;
+    background: #90caf9;
+    border-radius: 50%;
+    position: absolute;
+    top: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.fins {
+    position: absolute;
+    bottom: 0;
+}
+
+.fin {
+    width: 20px;
+    height: 30px;
+    background: #d32f2f;
+    position: absolute;
+    bottom: 0;
+}
+
+.fin.left {
+    left: -20px;
+    transform: skewY(45deg);
+}
+
+.fin.right {
+    right: -20px;
+    transform: skewY(-45deg);
+}
+
+/* Flame */
+.flame {
+    width: 30px;
+    height: 60px;
+    background: linear-gradient(to bottom, #f57f17, #ffeb3b);
+    position: absolute;
+    bottom: -60px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 0 0 20px 20px;
+    animation: flicker 0.2s infinite;
+}
+
+/* Smoke */
+.smoke {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.smoke span {
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    position: absolute;
+    animation: smoke 2s infinite;
+}
+
+.smoke span:nth-child(1) { animation-delay: 0.2s; }
+.smoke span:nth-child(2) { animation-delay: 0.4s; }
+.smoke span:nth-child(3) { animation-delay: 0.6s; }
+
+/* Animations */
+@keyframes launch {
+    0% {
+        transform: translateX(-50%) translateY(0);
+    }
+    10% {
+        transform: translateX(-50%) translateY(-5px);
+    }
+    30% {
+        transform: translateX(-50%) translateY(-100px);
+    }
+    100% {
+        transform: translateX(-50%) translateY(-600px);
+    }
+}
+
+@keyframes flicker {
+    0%, 100% {
+        transform: translateX(-50%) scaleY(1);
+    }
+    50% {
+        transform: translateX(-50%) scaleY(1.1);
+    }
+}
+
+@keyframes smoke {
+    0% {
+        transform: translateY(0) scale(1);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translateY(-100px) scale(3);
+        opacity: 0;
+    }
+}
+
+@keyframes twinkle {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 500px) {
+    .scene {
+        width: 300px;
+        height: 450px;
+    }
+}