From aa5125a94b867bf82d3702dd724839ba2c4a7c3b Mon Sep 17 00:00:00 2001
From: AMAL T SCARIA <96042434+amaltscaria@users.noreply.github.com>
Date: Fri, 24 Jan 2025 20:13:45 +0530
Subject: [PATCH] Cosmic css (#2906)
* Feat: Add cosmic_css animation
* Feat: add cosmic_css animation
---
Art/amaltscaria-cosmic_css/index.html | 32 ++++
Art/amaltscaria-cosmic_css/meta.json | 5 +
Art/amaltscaria-cosmic_css/styles.css | 213 ++++++++++++++++++++++++++
3 files changed, 250 insertions(+)
create mode 100644 Art/amaltscaria-cosmic_css/index.html
create mode 100644 Art/amaltscaria-cosmic_css/meta.json
create mode 100644 Art/amaltscaria-cosmic_css/styles.css
diff --git a/Art/amaltscaria-cosmic_css/index.html b/Art/amaltscaria-cosmic_css/index.html
new file mode 100644
index 000000000..b6521240a
--- /dev/null
+++ b/Art/amaltscaria-cosmic_css/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Super Rocket Animation
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/amaltscaria-cosmic_css/meta.json b/Art/amaltscaria-cosmic_css/meta.json
new file mode 100644
index 000000000..733301dc0
--- /dev/null
+++ b/Art/amaltscaria-cosmic_css/meta.json
@@ -0,0 +1,5 @@
+
+{
+ "artName": "cosmic_css",
+ "githubHandle": "amaltscaria"
+ }
\ No newline at end of file
diff --git a/Art/amaltscaria-cosmic_css/styles.css b/Art/amaltscaria-cosmic_css/styles.css
new file mode 100644
index 000000000..ba1f81776
--- /dev/null
+++ 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;
+ }
+}
\ No newline at end of file