From fb52e3bc7ffdfa3c2a096bf1877e0d8e0c101666 Mon Sep 17 00:00:00 2001 From: Divyansh Arya <107753270+divyansharya8826@users.noreply.github.com> Date: Mon, 30 Oct 2023 23:36:41 +0530 Subject: [PATCH] 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 --- Art/divyansharya8826/index.css | 23 +++++++++++++++++++++++ Art/divyansharya8826/index.html | 10 ++++++++++ Art/divyansharya8826/square.gif | Bin 0 -> 1154270 bytes include.js | 7 +++++++ 4 files changed, 40 insertions(+) create mode 100644 Art/divyansharya8826/index.css create mode 100644 Art/divyansharya8826/index.html create mode 100644 Art/divyansharya8826/square.gif diff --git a/Art/divyansharya8826/index.css b/Art/divyansharya8826/index.css new file mode 100644 index 000000000..47935faca --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Art/divyansharya8826/index.html b/Art/divyansharya8826/index.html new file mode 100644 index 000000000..6ddc5719a --- /dev/null +++ b/Art/divyansharya8826/index.html @@ -0,0 +1,10 @@ + + +
+