Merge pull request #271 from shreenarayan123/#158/Shuffling-squares-a…

…dded #158/shuffling squares added
you-dont-need · Oct 20, 2023 · a0d2f77 · a0d2f77
2 parents 05a5fd0 + 5ce00d8
commit a0d2f77
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 1. [Switch](#switch)
 1. [Bonfire](#bonfire)
 1. [City animation footer](#city-animation-footer)
+1. [Shuffling Squares](#shuffling-squares)
 
 ## <a id="Accordion"></a>Accordion / Toggle
 
@@ -408,6 +409,11 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 
 **[⬆ back to top](#quick-links)**
 
+---
+## <a id="shuffling-squres"></a>Shuffling squares
+[<img src="images/shuffling-squares.gif" height="230" title="Shuffling squares">](https://im3.ezgif.com/tmp/ezgif-3-41efb679c2.gif)
+**[⬆ back to top](#quick-links)**
+
 ---
 
 ## Contributors

diff --git a/Shuffling squares/shuffling.css b/Shuffling squares/shuffling.css
@@ -0,0 +1,110 @@
+body 
+{ margin: 0; 
+ background: #f5a9c7;
+}
+
+span {
+  position: absolute;
+  display: block;
+  width: 450px;
+  height: 450px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+}
+
+article {
+  margin: 0;
+  position: absolute;
+}
+
+figure {
+  position: absolute;
+  background: #5bb8ea;
+  width: 150px;
+  height: 150px;
+  animation: idk2 2s ease infinite;
+  margin: 0;
+}
+
+.what figure {
+  animation: idk2 2s ease infinite;
+  animation-direction: reverse;
+}
+
+figure:nth-child(2) {
+  left: 150px;
+  animation-delay: .5s;
+}
+
+figure:nth-child(3) {
+  left: 150px;
+  top: 150px;
+  animation-delay: 1s;
+}
+
+figure:nth-child(4) {
+  top: 150px;
+  animation-delay: 1.5s;
+}
+
+
+div {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  background: #fbfbfb;
+  animation: idk 2s ease infinite;
+}
+
+div:nth-child(2) {
+  left: 50px;
+  animation-delay: .5s;
+}
+
+div:nth-child(3) {
+  left: 50px;
+  top: 50px;
+  animation-delay: 1s;
+}
+
+div:nth-child(4) {
+  top: 50px;
+  animation-delay: 1.5s;
+}
+
+@keyframes idk {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(50px) rotate(90deg);
+  }
+  50% {
+    transform: translateX(50px) translateY(50px) rotate(0);
+  }
+  75% {
+    transform: translateX(0) translateY(50px) rotate(90deg);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes idk2 {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(150px) rotate(90deg);
+  }
+  50% {
+    transform: translateX(150px) translateY(150px) rotate(0);
+  }
+  75% {
+    transform: translateX(0) translateY(150px) rotate(90deg);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
diff --git a/Shuffling squares/shuffling.html b/Shuffling squares/shuffling.html
@@ -0,0 +1,66 @@
+<!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="./shuffling.css">
+    <title>Shuffling Squares</title>
+</head>
+<body>
+    <span>
+        <article>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        </article>
+
+        <article class="what">
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        <figure>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        </figure>
+        </article>
+        </span>
+</body>
+</html>
diff --git a/images/shuffling-squares.gif b/images/shuffling-squares.gif