you-dont-need#158/Shuffling-squares-added

shreenarayan123 · Oct 20, 2023 · a0639ef · a0639ef
1 parent bc62f52
commit a0639ef
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 0 deletions.
diff --git a/Shuffling squares/shuffling.css b/Shuffling squares/shuffling.css
@@ -0,0 +1,107 @@
+body { margin: 0; background-color: rgb(182, 222, 244);}
+
+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>