Skip to content

Commit 9b73896

Browse files
cp-sumi-kcp-sumi-k
committed
Square and circle animations
1 parent 9c23463 commit 9b73896

19 files changed

+346
-56
lines changed

‎index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Tailwind Animations</title>
8-
</head>
9-
<body>
10-
<div id="app"></div>
11-
<script type="module" src="/src/main.ts"></script>
12-
</body>
13-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Tailwind Animations</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/main.js"></script>
14+
</body>
15+
16+
</html>

‎src/App.vue‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
1-
<script setup lang="ts">
1+
<script setup>
22
import ProgressDots from "./components/ProgressDots.vue";
33
import RotateDot from "./components/RotateDot.vue";
44
import ThreeBounce from "./components/ThreeBounce.vue";
55
import RotateTwoDots from "./components/RotateTwoDots.vue";
6+
import SquareFill from "./components/SquareFill.vue";
7+
import RotateSquare from "./components/RotateSquare.vue";
8+
import JumpingHeart from "./components/JumpingHeart.vue";
9+
import RotateCircle from "./components/RotateCircle.vue";
10+
import ArcRotation from "./components/ArcRotation.vue";
11+
import Clock from "./components/Clock.vue";
12+
import Wave from "./components/Wave.vue";
13+
import TwinCircle from "./components/TwinCircle.vue";
14+
import Pacman from "./components/Pacman.vue";
615
</script>
716

817
<template>
9-
<div class="h-screen my-20 flex flex-nowrap">
18+
<div class="h-screen my-20 flex flex-wrap container m-16">
19+
<RotateSquare class="wrapper" />
1020
<ProgressDots class="wrapper" />
11-
<RotateDot class="relative wrapper" />
21+
<JumpingHeart class="wrapper" />
22+
<RotateDot class="wrapper" />
23+
<Pacman class="wrapper" />
1224
<ThreeBounce class="wrapper" />
25+
<ArcRotation class="wrapper" />
1326
<RotateTwoDots class="wrapper" />
27+
<SquareFill class="wrapper" />
28+
<Clock class="wrapper" />
29+
<RotateCircle class="wrapper" />
30+
<Wave class="wrapper" />
31+
<TwinCircle class="wrapper" />
1432
</div>
1533
</template>
1634

1735

1836
<style scoped lang="postcss">
1937
.wrapper {
20-
@apply flex gap-4 h-64 w-64 bg-pink-100 items-center justify-center m-4 ;
38+
@apply relative flex gap-2 h-64 w-64 bg-pink-100 items-center justify-center m-4;
2139
}
2240
</style>

‎src/assets/images/animations.gif‎

1.8 MB
Loading

‎src/components/ArcRotation.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<div
4+
class="
5+
center
6+
h-36
7+
w-36
8+
border-4 border-x-pink-600 border-y-pink-100
9+
animate-spin
10+
"
11+
>
12+
<div class="center h-24 w-24 bg-white">
13+
<div class="h-12 w-12 rounded-full bg-green-200 animate-zoom-in"></div>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<style scoped lang="postcss">
20+
.center {
21+
@apply rounded-full flex justify-center items-center;
22+
}
23+
</style>
24+

‎src/components/Clock.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<div
4+
class="
5+
flex
6+
justify-center
7+
items-center
8+
h-36
9+
w-36
10+
bg-white
11+
border-2 border-black
12+
rounded-full
13+
before:absolute
14+
before:w-2
15+
before:h-16
16+
before:bg-pink-600
17+
before:rounded
18+
before:top-2/4
19+
before:origin-top
20+
before:animate-spin-fast
21+
after:absolute
22+
after:w-2
23+
after:h-12
24+
after:bg-black
25+
after:rounded
26+
after:top-2/4
27+
after:origin-top
28+
after:animate-spin-slow
29+
"
30+
>
31+
<div class="rounded-full h-4 w-4 bg-black z-40"></div>
32+
</div>
33+
</div>
34+
</template>

‎src/components/JumpingHeart.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="flex-col">
3+
<div
4+
class="
5+
relative
6+
h-16
7+
w-16
8+
bg-pink-600
9+
before:absolute
10+
before:h-16
11+
before:w-16
12+
before:rounded-full
13+
before:bg-pink-600
14+
before:-left-8
15+
after:absolute
16+
after:h-16
17+
after:w-16
18+
after:rounded-full
19+
after:bg-pink-600
20+
after:-top-8
21+
animate-jump-heart
22+
"
23+
></div>
24+
<div class="h-4 w-8 bg-pink-600 rounded-md my-4 animate-line"></div>
25+
</div>
26+
</template>
27+

‎src/components/Pacman.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<div>
3+
<div class="relative rounded-full h-36 w-36 bg-white flex justify-center">
4+
<div class="rounded-full h-4 w-4 bg-black mt-4"></div>
5+
<div class="absolute h-full w-full bg-pink-100 animate-pacman"></div>
6+
</div>
7+
</div>
8+
</template>

‎src/components/RotateCircle.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<div>
3+
<div class="h-36 w-36 bg-pink-600 rounded-full animate-rotate"></div>
4+
</div>
5+
</template>
6+

‎src/components/RotateDot.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<template>
22
<div>
33
<div class="rotate h-16 w-16 border border-pink-300">
4-
<div
5-
class="rotate h-4 w-4 bg-pink-600 animate-circle"
6-
></div>
4+
<div class="rotate h-4 w-4 bg-pink-600 animate-circle"></div>
75
</div>
86
</div>
97
</template>

‎src/components/RotateSquare.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div class="main">
3+
<div class="h-36 w-36 bg-pink-600 animate-rotate"></div>
4+
</div>
5+
</template>
6+
7+
<style scoped lang="postcss">
8+
.main {
9+
perspective: 20em;
10+
}
11+
</style>
12+

0 commit comments

Comments
 (0)