From 0841d8eb074e14e729681d94b3512f2931d3df9d Mon Sep 17 00:00:00 2001
From: Shreyans2004 <128773151+Shreyans2004@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:28:04 +0000
Subject: [PATCH] Sqauare zoom animation added
---
.../Zoom sqaure animation/index.html | 13 +++++++
.../Zoom sqaure animation/styles.css | 35 +++++++++++++++++++
2 files changed, 48 insertions(+)
create mode 100644 Frontend-Projects/Zoom sqaure animation/index.html
create mode 100644 Frontend-Projects/Zoom sqaure animation/styles.css
diff --git a/Frontend-Projects/Zoom sqaure animation/index.html b/Frontend-Projects/Zoom sqaure animation/index.html
new file mode 100644
index 0000000000..bbc96bdb19
--- /dev/null
+++ b/Frontend-Projects/Zoom sqaure animation/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Document
+
+
+
+
+ LOADING...
+
+
\ No newline at end of file
diff --git a/Frontend-Projects/Zoom sqaure animation/styles.css b/Frontend-Projects/Zoom sqaure animation/styles.css
new file mode 100644
index 0000000000..a4ef3fe2af
--- /dev/null
+++ b/Frontend-Projects/Zoom sqaure animation/styles.css
@@ -0,0 +1,35 @@
+body{
+ width:100vw;
+height: 100vh;
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+
+
+}
+#main{
+ display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+box-shadow: 10px 10px 5px black;
+font-size: 0.1rem;
+ width: 30px;
+ height: 30px;
+ animation: animate 7s linear infinite ;
+
+ background-image: repeating-conic-gradient( #FF7F00,#FF0000, #9400D3,#FF7F00);
+}
+@keyframes animate {
+ 0%{
+ transform: rotateY(0deg) ;
+ }
+ 50%{
+ transform: scale(5);
+ }
+ 100%{
+ transform: scale(90) ;
+ }
+
+}
\ No newline at end of file