Skip to content

Commit 41e3225

Browse files
zkuperbergzkuperberg
committed
Create hourglass animation
1 parent b0d38e5 commit 41e3225

3 files changed

Lines changed: 271 additions & 0 deletions

File tree

‎Art/zkuperberg-hourglass/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="he">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>hourglass</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
9+
</head>
10+
11+
<body>
12+
<div class="hourglass-container">
13+
<div class="hourglass">
14+
<i class="bi bi-hourglass hourglass-icon"></i>
15+
<div class="ball ball-1"></div>
16+
<div class="ball ball-2"></div>
17+
<div class="ball ball-3"></div>
18+
<div class="ball ball-4"></div>
19+
<div class="ball ball-5"></div>
20+
<div class="ball ball-6"></div>
21+
</div>
22+
</div>
23+
</body>
24+
25+
</html>

‎Art/zkuperberg-hourglass/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "hourglass",
3+
"githubHandle": "zkuperberg"
4+
}

‎Art/zkuperberg-hourglass/style.css‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background-color: #357a58;
13+
}
14+
15+
.hourglass {
16+
width: 90px;
17+
height: 120px;
18+
position: relative;
19+
animation: flip 3s linear infinite;
20+
z-index: 1;
21+
22+
}
23+
24+
.hourglass-icon {
25+
position: absolute;
26+
font-size: 160px;
27+
left: -39%;
28+
top: -25px;
29+
color: #2e2929;
30+
}
31+
32+
33+
.ball {
34+
width: 18px;
35+
height: 18px;
36+
background: radial-gradient(circle at 30% 30%, #eecece, #857171);
37+
border-radius: 50%;
38+
position: absolute;
39+
transform: translateX(-50%);
40+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3),
41+
inset -2px -2px 4px rgba(0, 0, 0, 0.2),
42+
inset 2px 2px 4px rgba(255, 255, 255, 0.4);
43+
}
44+
45+
46+
.ball-1 {
47+
animation: fall1 3s ease-in infinite;
48+
}
49+
50+
.ball-2 {
51+
animation: fall2 3s ease-in infinite;
52+
}
53+
54+
.ball-3 {
55+
animation: fall3 3s ease-in infinite;
56+
}
57+
58+
.ball-4 {
59+
animation: fall4 3s ease-in infinite;
60+
}
61+
62+
.ball-5 {
63+
animation: fall5 3s ease-in infinite;
64+
}
65+
66+
.ball-6 {
67+
animation: fall6 3s ease-in infinite;
68+
}
69+
70+
@keyframes fall1 {
71+
0% {
72+
top: 40px;
73+
left: 50%;
74+
}
75+
76+
15%, 100% {
77+
top: 100px;
78+
left: 50%;
79+
}
80+
}
81+
82+
@keyframes fall2 {
83+
0% {
84+
top: 25px;
85+
left: 35%;
86+
}
87+
88+
15% {
89+
top: 40px;
90+
left: 50%;
91+
}
92+
93+
30% {
94+
top: 75px;
95+
left: 50%;
96+
}
97+
98+
35% {
99+
top: 77px;
100+
left: 63%;
101+
}
102+
103+
40%, 100% {
104+
top: 100px;
105+
left: 80%;
106+
}
107+
}
108+
109+
@keyframes fall3 {
110+
0% {
111+
top: 25px;
112+
left: 65%;
113+
}
114+
115+
15% {
116+
top: 25px;
117+
left: 65%;
118+
}
119+
120+
30% {
121+
top: 40px;
122+
left: 50%;
123+
}
124+
125+
40% {
126+
top: 70px;
127+
left: 50%;
128+
}
129+
130+
45% {
131+
top: 80px;
132+
left: 35%;
133+
}
134+
135+
50%, 100% {
136+
top: 100px;
137+
left: 20%;
138+
}
139+
}
140+
141+
@keyframes fall4 {
142+
0% {
143+
top: 10px;
144+
left: 20%;
145+
}
146+
147+
15% {
148+
top: 25px;
149+
left: 35%;
150+
}
151+
152+
60% {
153+
top: 25px;
154+
left: 35%;
155+
}
156+
157+
75% {
158+
top: 40px;
159+
left: 50%;
160+
}
161+
162+
90%, 100% {
163+
top: 70px;
164+
left: 50%;
165+
}
166+
}
167+
168+
@keyframes fall5 {
169+
0% {
170+
top: 10px;
171+
left: 50%;
172+
}
173+
174+
35% {
175+
top: 10px;
176+
left: 50%;
177+
}
178+
179+
50% {
180+
top: 25px;
181+
left: 65%;
182+
}
183+
184+
60% {
185+
top: 40px;
186+
left: 50%;
187+
}
188+
189+
75% {
190+
top: 65px;
191+
left: 50%;
192+
}
193+
194+
80%, 100% {
195+
top: 85px;
196+
left: 65%;
197+
}
198+
}
199+
200+
@keyframes fall6 {
201+
0% {
202+
top: 10px;
203+
left: 80%;
204+
}
205+
206+
15% {
207+
top: 10px;
208+
left: 80%;
209+
}
210+
211+
30% {
212+
top: 25px;
213+
left: 65%;
214+
}
215+
216+
45% {
217+
top: 40px;
218+
left: 50%;
219+
}
220+
221+
50% {
222+
top: 70px;
223+
left: 50%;
224+
}
225+
226+
60%, 100% {
227+
top: 85px;
228+
left: 35%;
229+
}
230+
}
231+
232+
@keyframes flip {
233+
234+
0%,
235+
92% {
236+
transform: rotate(0deg);
237+
}
238+
239+
100% {
240+
transform: rotate(180deg);
241+
}
242+
}

0 commit comments

Comments
 (0)