Attractive Sqaure animation using css (#2405)

* Create index.html * Add files via upload * Update include.js * Delete Art/SaumyaKumar-09/Animation 4/Gif4.mp4 * Add files via upload * Update include.js * Create index.html * Add files via upload * Update include.js * Update include.js
zero-to-mastery · Oct 31, 2023 · c3a95af · c3a95af
1 parent c59020d
commit c3a95af
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 0 deletions.
diff --git a/Art/SaumyaKumar-09/Animation 3/Animation3.gif b/Art/SaumyaKumar-09/Animation 3/Animation3.gif
diff --git a/Art/SaumyaKumar-09/Animation 3/index.html b/Art/SaumyaKumar-09/Animation 3/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width-device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Bouncing ball - Animation</title>
+        <link rel="stylesheet" href="./styles.css">
+    </head>
+    <body>
+        <div class="loader">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
+            <div class="bounce4"></div>
+            <div class="bounce5"></div>
+        </div>
+    </body>
+</html>
diff --git a/Art/SaumyaKumar-09/Animation 3/styles.css b/Art/SaumyaKumar-09/Animation 3/styles.css
@@ -0,0 +1,83 @@
+* {
+    padding: 0px;
+    margin: 0px;
+}
+
+body {
+    background-color: #e15f41;
+}
+
+.loader {
+    width: 60px;
+    height: 60px;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.bounce1 {
+    width: 100%;
+    height: 100%;
+    background-color: #ffffff;
+    border-radius: 20%;
+    opacity: 0.6;
+    position:  absolute;
+    animation: bounce 3s ease-in-out infinite;
+}
+
+.bounce2 {
+    width: 150%;
+    height: 150%;
+    background-color: #ffffff;
+    border-radius: 20%;
+    opacity: 0.6;
+    position:  absolute;
+    animation: bounce 3s ease-in-out infinite;
+    animation-delay: -0.5s;
+}
+.bounce3 {
+    width: 200%;
+    height: 200%;
+    background-color: #ffffff;
+    border-radius: 20%;
+    opacity: 0.6;
+    position:  absolute;
+    animation: bounce 3s ease-in-out infinite;
+    animation-delay: -1s;
+}
+.bounce4 {
+    width: 250%;
+    height: 250%;
+    background-color: #ffffff;
+    border-radius: 20%;
+    opacity: 0.6;
+    position:  absolute;
+    animation: bounce 3s ease-in-out infinite;
+    animation-delay: -1.5s;
+}
+
+.bounce5 {
+    width: 300%;
+    height: 300%;
+    background-color: #ffffff;
+    border-radius: 20%;
+    opacity: 0.6;
+    position:  absolute;
+    animation: bounce 2s ease-in-out infinite;
+    animation-delay: -2s;
+}
+
+
+@keyframes bounce {
+    0%, 100% {
+        transform: scale(0.0);
+    }
+    50% {
+        transform: scale(2.0);
+    }
+    25% {
+        transform: trasnlate(100px,200px);
+    }
+}
diff --git a/include.js b/include.js
@@ -13,6 +13,27 @@ let cards = [
     author: 'SaumyaKumar-09',
     githubLink: 'https://github.com/SaumyaKumar-09'
   },
+  {
+    artName: 'Windows start animation',
+    pageLink: './Art/SaumyaKumar-09/Animation%202/index.html',
+    imageLink: './Art/SaumyaKumar-09/Animation%202/Animation2.gif',
+    author: 'SaumyaKumar-09',
+    githubLink: 'https://github.com/SaumyaKumar-09'
+  },
+  {
+    artName: 'Attractive Sqaure Animation',
+    pageLink: './Art/SaumyaKumar-09/Animation%203/index.html',
+    imageLink: './Art/SaumyaKumar-09/Animation%203/Animation3.gif',
+    author: 'SaumyaKumar-09',
+    githubLink: 'https://github.com/SaumyaKumar-09'
+  },
+  {
+    artName: 'Loading Page',
+    pageLink: './Art/SaumyaKumar-09/Animation%204/index.html',
+    imageLink: './Art/SaumyaKumar-09/Animation%204/Animation4.gif',
+    author: 'SaumyaKumar-09',
+    githubLink: 'https://github.com/SaumyaKumar-09'
+  },
   {
     artName: 'Elevator Ride',
     pageLink: './Art/deverestHood/index.html',