From fdb0fa01c4e075f1b765fc023cf167ae7d73f1f6 Mon Sep 17 00:00:00 2001
From: Shreyans2004 <128773151+Shreyans2004@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:20:17 +0000
Subject: [PATCH] Rotating square like animation added
---
Frontend-Projects/Rotating/index.html | 40 +++++++++++++++++++++++++++
Frontend-Projects/Rotating/styles.css | 36 ++++++++++++++++++++++++
2 files changed, 76 insertions(+)
create mode 100644 Frontend-Projects/Rotating/index.html
create mode 100644 Frontend-Projects/Rotating/styles.css
diff --git a/Frontend-Projects/Rotating/index.html b/Frontend-Projects/Rotating/index.html
new file mode 100644
index 0000000000..fc7dafdeb5
--- /dev/null
+++ b/Frontend-Projects/Rotating/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+ Document
+
+
+
+
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ LOADING............
+ hi....
+
+
\ No newline at end of file
diff --git a/Frontend-Projects/Rotating/styles.css b/Frontend-Projects/Rotating/styles.css
new file mode 100644
index 0000000000..a644869c8a
--- /dev/null
+++ b/Frontend-Projects/Rotating/styles.css
@@ -0,0 +1,36 @@
+body{
+ width:100vw;
+height: 100vh;
+display: flex;
+justify-content: center;
+align-items: center;
+
+
+
+}
+#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 9s linear infinite alternate;
+
+ background-image: repeating-conic-gradient( #FF7F00,#FF0000, #9400D3,#FF7F00);
+}
+@keyframes animate {
+ 0%{
+ transform: rotateY(0deg) ;
+ }
+ 50%{
+ transform: rotateZ(360deg) scale(5);
+ }
+ 100%{
+ transform: rotateZ(0deg) scale(20) ;
+ }
+
+}
\ No newline at end of file