feat: add wave circle gif

readme.md

@@ -1,9 +1,13 @@
 these are practice css from youtube
 
-### milk
+## milk
 for milk Liquid Loader
 ![milk effect gif](/milk/milk.gif)
 
-### infinity
+## infinity
 for infinity dots animation effects
 ![infinity effect gif](/infinity/infinity.gif)
+
+## wave_circle
+for 3d wave circle
+![3d wave circle](/wave_circle/wave_circle.gif)

wave_circle/style.css

@@ -24,18 +24,18 @@ body {
               inset 0 5px 0 #ccc;
   box-sizing: border-box;
   border-radius: 50%;
-  animation: animate 3s ease-in-out infinite;
+  animation: animate 4s ease-in-out infinite;
   top: calc(10px * var(--i));
   left: calc(10px * var(--i));
   right: calc(10px * var(--i));
   bottom: calc(10px * var(--i));
-  animation-delay: 0s;
+  animation-delay: calc(-0.1s * var(--i));
 }
 @keyframes animate {
   0%,100% {
-    transform: translateZ(-100px);
+    transform: translateZ(-120px);
   }
   50% {
-    transform: translateZ(100px);
+    transform: translateZ(120px);
   }
 }