Merge pull request #2869 from oOXxTNTxXOo/master

TNT's animation
zero-to-mastery · Nov 1, 2024 · c12790f · c12790f
2 parents c934571 + 667facc
commit c12790f
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 0 deletions.
diff --git a/Art/oOXxTNTxXOo-colorchange/index.html b/Art/oOXxTNTxXOo-colorchange/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>colorchange</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+
+  <body>
+    <div class="changercolor">
+      <div class="pixel-container">
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+        <div class="pixel"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Art/oOXxTNTxXOo-colorchange/meta.json b/Art/oOXxTNTxXOo-colorchange/meta.json
@@ -0,0 +1,5 @@
+{
+    "githubHandle": "oOXxTNTxXOo",
+    "artName": "colorchange"
+  }
+
diff --git a/Art/oOXxTNTxXOo-colorchange/styles.css b/Art/oOXxTNTxXOo-colorchange/styles.css
@@ -0,0 +1,91 @@
+body {
+    animation: changercolor 15s linear infinite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+  }
+
+@keyframes changercolor { /* background randbow cycle */
+    0%{
+        background-color: red;
+    }
+    25%{
+        background-color: yellow;
+    }
+    50%{
+        background-color: cyan;
+    }
+    75%{
+        background-color: purple;
+    } 
+    100%{
+        background-color: red;
+    }
+}
+
+.pixel-container {
+  display: flex;
+  gap: 5px;
+}
+
+.pixel {
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  animation: pixel-load 1s ease-in-out infinite;
+}
+
+.pixel:nth-child(1) {
+  animation-delay: 0s;
+}
+.pixel:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.pixel:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.pixel:nth-child(4) {
+  animation-delay: 0.3s;
+}
+.pixel:nth-child(5) {
+  animation-delay: 0.4s;
+}
+.pixel:nth-child(6) {
+  animation-delay: 0.5s;
+}
+.pixel:nth-child(7) {
+  animation-delay: 0.6s;
+}
+.pixel:nth-child(8) {
+  animation-delay: 0.7s;
+}
+.pixel:nth-child(9) {
+  animation-delay: 0.8s;
+}
+
+
+@keyframes pixel-load {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+    background-color: cyan;
+  }
+  25%{
+    background-color: purple;
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+    background-color: red;
+  }
+  75%{
+    background-color: yellow;
+  } 
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    background-color: cyan;
+  }
+}