Merge pull request #449 from zero-to-mastery/webdesign4ever-WebAnim

Webdesign4ever web anim
zero-to-mastery · Aug 9, 2023 · 2cd47f4 · 2cd47f4
2 parents 47e0928 + 4012fab
commit 2cd47f4
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 0 deletions.
diff --git a/Art/webdesign4ever/animation.gif b/Art/webdesign4ever/animation.gif
diff --git a/Art/webdesign4ever/index.html b/Art/webdesign4ever/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+
+  <body>
+    <br />
+    <div id="ts3"></div>
+  </body>
+</html>
diff --git a/Art/webdesign4ever/style.css b/Art/webdesign4ever/style.css
@@ -0,0 +1,78 @@
+#ts3 {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  position: relative;
+  animation-name: example2;
+  animation-duration: 4s;
+  animation-delay: 1s;
+  animation-direction: alternate-reverse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes example2 {
+  0% {
+    background-color: red;
+    left: 0%;
+    top: 0px;
+    transform: rotate(360deg);
+  }
+
+  25% {
+    background-color: yellow;
+    left: 90%;
+    top: 0px;
+    transform: rotate(270deg);
+  }
+
+  50% {
+    background-color: black;
+    left: 90%;
+    top: 450px;
+    transform: rotate(180deg);
+  }
+
+  75% {
+    background-color: aquamarine;
+    top: 450px;
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  100% {
+    background-color: red;
+    left: 0%;
+    top: 0px;
+  }
+}
+
+body {
+  animation-name: example;
+  animation-duration: 4s;
+  animation-delay: 1s;
+  background-color: blueviolet;
+  animation-direction: alternate-reverse;
+  animation-iteration-count: infinite;
+}
+
+@keyframes example {
+  0% {
+    background-color: blueviolet;
+  }
+
+  25% {
+    background-color: aquamarine;
+  }
+
+  50% {
+    background-color: coral;
+  }
+
+  75% {
+    background-color: gold;
+  }
+
+  100% {
+    background-color: lightblue;
+  }
+}
diff --git a/include.js b/include.js
@@ -3475,6 +3475,13 @@ let cards = [
     imageLink: './Art/Anrich/Portball.gif',
     author: 'Anrich',
     githubLink: 'https://github.com/AnrichV'
+  },
+  {
+    artName: 'webdesign4ever-animation',
+    pageLink: './Art/webdesign4ever/index.html',
+    imageLink: './Art/webdesign4ever/animation.gif',
+    author: 'webdesign4ever',
+    githubLink: 'https://github.com/webdesign4ever'
   }
 ];