Added Shooting Stars Night Background (#1496)

avnisinngh · web-flow · commit 4998d3f9109a · 2025-03-01T19:50:55.000+05:30
diff --git a/Components/Backgrounds/Shooting-Stars-Night-Background/index.html b/Components/Backgrounds/Shooting-Stars-Night-Background/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Shooting Stars Night Background</title>
+</head>
+<body>
+    <script>
+        function createStar() {
+            const star = document.createElement("div");
+            star.classList.add("star");
+            document.body.appendChild(star);
+
+            const size = Math.random() * 3 + "px";
+            star.style.width = size;
+            star.style.height = size;
+            star.style.left = Math.random() * 100 + "vw";
+            star.style.top = Math.random() * 100 + "vh";
+            star.style.animationDuration = Math.random() * 3 + 2 + "s";
+
+            setTimeout(() => { star.remove(); }, 5000);
+        }
+
+        function createShootingStar() {
+            const shootingStar = document.createElement("div");
+            shootingStar.classList.add("shooting-star");
+            document.body.appendChild(shootingStar);
+
+            shootingStar.style.left = Math.random() * 100 + "vw";
+            shootingStar.style.top = Math.random() * 100 + "vh";
+            shootingStar.style.animationDuration = Math.random() * 5 + 3 + "s";
+
+            setTimeout(() => { shootingStar.remove(); }, 5000);
+        }
+
+        setInterval(createStar, 300);
+        setInterval(createShootingStar, 4000);
+    </script>
+</body>
+</html>
diff --git a/Components/Backgrounds/Shooting-Stars-Night-Background/style.css b/Components/Backgrounds/Shooting-Stars-Night-Background/style.css
@@ -0,0 +1,49 @@
+body {
+    margin: 0;
+    height: 100vh;
+    background: radial-gradient(circle at bottom, #091540, #020c1b);
+    overflow: hidden;
+    position: relative;
+}
+
+.star {
+    position: absolute;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: twinkle 2s infinite alternate ease-in-out;
+}
+
+@keyframes twinkle {
+    0% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.shooting-star {
+    position: absolute;
+    width: 2px;
+    height: 50px;
+    background: white;
+    opacity: 0.8;
+    transform: rotate(-45deg);
+    animation: shooting 3s linear infinite;
+}
+
+@keyframes shooting {
+    0% {
+        top: -10%;
+        left: 80%;
+        opacity: 1;
+    }
+
+    100% {
+        top: 100%;
+        left: 20%;
+        opacity: 0;
+    }
+}
diff --git a/assets/json_files/backgrounds.json b/assets/json_files/backgrounds.json
@@ -189,6 +189,11 @@
         "previewLink": "../../Components/Backgrounds/Shooting-Stars-Background/index.html",
         "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Shooting-Stars-Background"
     },
+    {
+        "title": "Shooting Stars Night Background",
+        "previewLink": "../../Components/Backgrounds/Shooting-Stars-Night-Background/index.html",
+        "sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Backgrounds/Shooting-Stars-Night-Background"
+    },
     {
         "title": "Smoke Background",
         "previewLink": "../../Components/Backgrounds/Smoke-Background/index.html",
