2 Commits

3 changed files with 10 additions and 6 deletions
Split View
  1. +6
    -2
      readme.md
  2. +4
    -4
      wave_circle/style.css
  3. BIN
      wave_circle/wave_circle.gif

+ 6
- 2
readme.md View File

@@ -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)

+ 4
- 4
wave_circle/style.css View File

@@ -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);
}
}

BIN
wave_circle/wave_circle.gif View File

Before After
Width: 500  |  Height: 388  |  Size: 802 kB

Loading…
Cancel
Save