diff --git a/Frontend-Projects/Illusion ball animation/index.html b/Frontend-Projects/Illusion ball animation/index.html
new file mode 100644
index 0000000000..5f19c34f52
--- /dev/null
+++ b/Frontend-Projects/Illusion ball animation/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Document
+
+
+
+
+ Hello friend
+
+
diff --git a/Frontend-Projects/Illusion ball animation/styles.css b/Frontend-Projects/Illusion ball animation/styles.css
new file mode 100644
index 0000000000..4ffc898425
--- /dev/null
+++ b/Frontend-Projects/Illusion ball animation/styles.css
@@ -0,0 +1,37 @@
+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 6s linear infinite ;
+border-radius: 50%;
+background-size: 1em 1em;
+ background-image: repeating-conic-gradient(black 0deg, black,90deg,white 90deg ,white 180deg, black 180deg, black 270deg,white 270deg ,white 360deg);
+}
+@keyframes animate {
+ 0%{
+ transform: rotateY(0deg) ;
+ }
+ 50%{
+ transform: rotateZ(180deg) scale(10);
+ }
+ 100%{
+ transform: rotateZ(360deg) scale(80) ;
+ }
+
+}
\ No newline at end of file