Vsingla branch- Added art by Vsingla21 (#2886)

* Animation art added by Vsingla21 * Edited atyles.css
zero-to-mastery · Nov 11, 2024 · fb3a1db · fb3a1db
1 parent fe8bbd1
commit fb3a1db
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 0 deletions.
diff --git a/Art/Vsingla21-graphique/index.html b/Art/Vsingla21-graphique/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>3D Rotating Star Animation with Unique Random Colors</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+  <div class="star-container">
+    <div class="star"></div>
+    <div class="star"></div>
+    <div class="star"></div>
+    <div class="star"></div>
+    <div class="star"></div>
+  </div>
+
+</body>
+</html>
diff --git a/Art/Vsingla21-graphique/meta.json b/Art/Vsingla21-graphique/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "graphique",
+    "githubHandle": "Vsingla21"
+}
diff --git a/Art/Vsingla21-graphique/styles.css b/Art/Vsingla21-graphique/styles.css
@@ -0,0 +1,167 @@
+
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        background-color: #000;
+        overflow: hidden;
+        perspective: 1000px;
+      }
+
+      .star-container {
+        width: 150px;
+        height: 150px;
+        position: relative;
+        transform-style: preserve-3d;
+        animation: rotate 5s linear infinite;
+      }
+
+      .star {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+        animation: changeColor 5s linear infinite;
+      }
+
+      .star:nth-child(1) {
+        transform: rotateY(0deg) translateZ(75px);
+        animation: changeColor1 5s linear infinite;
+      }
+      .star:nth-child(2) {
+        transform: rotateY(72deg) translateZ(75px);
+        animation: changeColor2 5s linear infinite;
+      }
+      .star:nth-child(3) {
+        transform: rotateY(144deg) translateZ(75px);
+        animation: changeColor3 5s linear infinite;
+      }
+      .star:nth-child(4) {
+        transform: rotateY(216deg) translateZ(75px);
+        animation: changeColor4 5s linear infinite;
+      }
+      .star:nth-child(5) {
+        transform: rotateY(288deg) translateZ(75px);
+        animation: changeColor5 5s linear infinite;
+      }
+
+      @keyframes rotate {
+        0% {
+          transform: rotateY(0deg);
+        }
+        100% {
+          transform: rotateY(360deg);
+        }
+      }
+
+     @keyframes changeColor1 {
+        0% {
+          background: hsl(0, 100%, 50%);   /* Red */
+        }
+        20% {
+          background: hsl(60, 100%, 50%);  /* Yellow */
+        }
+        40% {
+          background: hsl(120, 100%, 50%); /* Green */
+        }
+        60% {
+          background: hsl(180, 100%, 50%); /* Cyan */
+        }
+        80% {
+          background: hsl(240, 100%, 50%); /* Blue */
+        }
+        100% {
+          background: hsl(360, 100%, 50%); /* Red again */
+        }
+      }
+
+      @keyframes changeColor2 {
+        0% {
+          background: hsl(30, 100%, 50%);  /* Orange */
+        }
+        20% {
+          background: hsl(90, 100%, 50%);  /* Light Green */
+        }
+        40% {
+          background: hsl(150, 100%, 50%); /* Lime Green */
+        }
+        60% {
+          background: hsl(210, 100%, 50%); /* Sky Blue */
+        }
+        80% {
+          background: hsl(270, 100%, 50%); /* Purple */
+        }
+        100% {
+          background: hsl(330, 100%, 50%); /* Pink */
+        }
+      }
+
+      @keyframes changeColor3 {
+        0% {
+          background: hsl(10, 100%, 50%);  /* Red-Orange */
+        }
+        20% {
+          background: hsl(70, 100%, 50%);  /* Yellow-Green */
+        }
+        40% {
+          background: hsl(130, 100%, 50%); /* Green-Yellow */
+        }
+        60% {
+          background: hsl(190, 100%, 50%); /* Light Blue */
+        }
+        80% {
+          background: hsl(250, 100%, 50%); /* Dark Blue */
+        }
+        100% {
+          background: hsl(310, 100%, 50%); /* Violet */
+        }
+      }
+
+      @keyframes changeColor4 {
+        0% {
+          background: hsl(20, 100%, 50%);  /* Light Red */
+        }
+        20% {
+          background: hsl(80, 100%, 50%);  /* Light Yellow */
+        }
+        40% {
+          background: hsl(140, 100%, 50%); /* Yellow-Green */
+        }
+        60% {
+          background: hsl(200, 100%, 50%); /* Light Cyan */
+        }
+        80% {
+          background: hsl(260, 100%, 50%); /* Purple-Blue */
+        }
+        100% {
+          background: hsl(320, 100%, 50%); /* Magenta */
+        }
+      }
+
+      @keyframes changeColor5 {
+        0% {
+          background: hsl(50, 100%, 50%);  /* Lime */
+        }
+        20% {
+          background: hsl(110, 100%, 50%); /* Light Blue-Green */
+        }
+        40% {
+          background: hsl(170, 100%, 50%); /* Green-Blue */
+        }
+        60% {
+          background: hsl(230, 100%, 50%); /* Light Sky Blue */
+        }
+        80% {
+          background: hsl(290, 100%, 50%); /* Lavender */
+        }
+        100% {
+          background: hsl(350, 100%, 50%); /* Red-Pink */
+        }
+      }