Added Square shape color changing animation (#2277)

* Square shape added * Added square shape animation * Delete Art/divyansharya8826/ezgif.com-video-to-gif.gif * Update include.js
zero-to-mastery · Oct 30, 2023 · fb52e3b · fb52e3b
1 parent 8401750
commit fb52e3b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 0 deletions.
diff --git a/Art/divyansharya8826/index.css b/Art/divyansharya8826/index.css
@@ -0,0 +1,23 @@
+@keyframes ani
+{
+    0%{background-color: black; left: 0; top: 0;}
+    25%{background-color: aqua; left: 30px; top: 30px;}
+    50%{background-color: blanchedalmond;left: 60px; top: 60px;}
+    75%{background-color: blue; left: 90px; top: 90px;}
+    100%{background-color: red; left: 120px; top: 120px;}
+}
+#sqr
+{
+    background-color:aqua;
+    margin: 20px 30px;
+    width: 100px;
+    height: 100px;
+    transition-property: width height background-color;
+    transition-duration: 2s;
+    animation: ani 20s infinite;
+    position: absolute;
+}
+#sqr:hover{
+    width: 200px;
+    height: 200px;
+}
diff --git a/Art/divyansharya8826/index.html b/Art/divyansharya8826/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Square shape</title>
+        <link rel="stylesheet" type="text/css" href="index.css"/>
+    </head>
+    <body>
+        <div id="sqr"></div>
+    </body>
+</html>
diff --git a/Art/divyansharya8826/square.gif b/Art/divyansharya8826/square.gif
diff --git a/include.js b/include.js
@@ -2585,6 +2585,13 @@ let cards = [
     author: 'milesjorg',
     githubLink: 'https://github.com/milesjorg'
   },
+  {
+      artName: 'Square color changing animation',
+      pagelink: './Art/divyansharya8826/index.html',
+      imageLink: './Art/divyansharya8826/Square.gif',
+      author: 'divyansharya8826',
+      githubLink: 'https://github.com/divyansharya8826'
+  },
   {
     artName: 'Arrows',
     pageLink: './Art/rudrakushwaha/index.html',