Skip to content

Commit dfc4ed6

Browse files
ZemerikZemerik
committed
Add a Coffee Machine Animation
1 parent 9aaf0ac commit dfc4ed6

File tree

5 files changed

+295
-0
lines changed

5 files changed

+295
-0
lines changed

‎Coffee Machine Animation/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>Coffee Machine Animation</title>
5+
<link rel = "stylesheet" href = "style.css" />
6+
<link rel = "icon" href = "logo.png" />
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<div class="coffee-header">
12+
<div class="coffee-header__buttons coffee-header__button-one"></div>
13+
<div class="coffee-header__buttons coffee-header__button-two"></div>
14+
<div class="coffee-header__display"></div>
15+
<div class="coffee-header__details"></div>
16+
</div>
17+
<div class="coffee-medium">
18+
<div class="coffe-medium__exit"></div>
19+
<div class="coffee-medium__arm"></div>
20+
<div class="coffee-medium__liquid"></div>
21+
<div class="coffee-medium__smoke coffee-medium__smoke-one"></div>
22+
<div class="coffee-medium__smoke coffee-medium__smoke-two"></div>
23+
<div class="coffee-medium__smoke coffee-medium__smoke-three"></div>
24+
<div class="coffee-medium__smoke coffee-medium__smoke-for"></div>
25+
<div class="coffee-medium__cup"></div>
26+
</div>
27+
<div class="coffee-footer"></div>
28+
</div>
29+
</body>

‎Coffee Machine Animation/logo.png

320 KB
Loading

‎Coffee Machine Animation/style.css

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
body {
2+
background: linear-gradient(45deg, rgba(10, 151, 207, 0.9) 50%, rgba(15, 61, 214, 0.9) 50%);
3+
}
4+
5+
.container {
6+
width: 300px;
7+
height: 280px;
8+
position: absolute;
9+
top: calc(50% - 140px);
10+
left: calc(50% - 150px);
11+
}
12+
.coffee-header {
13+
width: 100%;
14+
height: 80px;
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
background-color: #ddcfcc;
19+
border-radius: 10px;
20+
}
21+
.coffee-header__buttons {
22+
width: 25px;
23+
height: 25px;
24+
position: absolute;
25+
top: 25px;
26+
background-color: #282323;
27+
border-radius: 50%;
28+
}
29+
.coffee-header__buttons::after {
30+
content: "";
31+
width: 8px;
32+
height: 8px;
33+
position: absolute;
34+
bottom: -8px;
35+
left: calc(50% - 4px);
36+
background-color: #615e5e;
37+
}
38+
.coffee-header__button-one {
39+
left: 15px;
40+
}
41+
.coffee-header__button-two {
42+
left: 50px;
43+
}
44+
.coffee-header__display {
45+
width: 50px;
46+
height: 50px;
47+
position: absolute;
48+
top: calc(50% - 25px);
49+
left: calc(50% - 25px);
50+
border-radius: 50%;
51+
background-color: #9acfc5;
52+
border: 5px solid #43beae;
53+
box-sizing: border-box;
54+
}
55+
.coffee-header__details {
56+
width: 8px;
57+
height: 20px;
58+
position: absolute;
59+
top: 10px;
60+
right: 10px;
61+
background-color: #9b9091;
62+
box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
63+
}
64+
.coffee-medium {
65+
width: 90%;
66+
height: 160px;
67+
position: absolute;
68+
top: 80px;
69+
left: calc(50% - 45%);
70+
background-color: #bcb0af;
71+
}
72+
.coffee-medium:before {
73+
content: "";
74+
width: 90%;
75+
height: 100px;
76+
background-color: #776f6e;
77+
position: absolute;
78+
bottom: 0;
79+
left: calc(50% - 45%);
80+
border-radius: 20px 20px 0 0;
81+
}
82+
.coffe-medium__exit {
83+
width: 60px;
84+
height: 20px;
85+
position: absolute;
86+
top: 0;
87+
left: calc(50% - 30px);
88+
background-color: #231f20;
89+
}
90+
.coffe-medium__exit::before {
91+
content: "";
92+
width: 50px;
93+
height: 20px;
94+
border-radius: 0 0 50% 50%;
95+
position: absolute;
96+
bottom: -20px;
97+
left: calc(50% - 25px);
98+
background-color: #231f20;
99+
}
100+
.coffe-medium__exit::after {
101+
content: "";
102+
width: 10px;
103+
height: 10px;
104+
position: absolute;
105+
bottom: -30px;
106+
left: calc(50% - 5px);
107+
background-color: #231f20;
108+
}
109+
.coffee-medium__arm {
110+
width: 70px;
111+
height: 20px;
112+
position: absolute;
113+
top: 15px;
114+
right: 25px;
115+
background-color: #231f20;
116+
}
117+
.coffee-medium__arm::before {
118+
content: "";
119+
width: 15px;
120+
height: 5px;
121+
position: absolute;
122+
top: 7px;
123+
left: -15px;
124+
background-color: #9e9495;
125+
}
126+
.coffee-medium__cup {
127+
width: 80px;
128+
height: 47px;
129+
position: absolute;
130+
bottom: 0;
131+
left: calc(50% - 40px);
132+
background-color: #FFF;
133+
border-radius: 0 0 70px 70px / 0 0 110px 110px;
134+
}
135+
.coffee-medium__cup::after {
136+
content: "";
137+
width: 20px;
138+
height: 20px;
139+
position: absolute;
140+
top: 6px;
141+
right: -13px;
142+
border: 5px solid #FFF;
143+
border-radius: 50%;
144+
}
145+
@keyframes liquid {
146+
0% {
147+
height: 0px;
148+
opacity: 1;
149+
}
150+
5% {
151+
height: 0px;
152+
opacity: 1;
153+
}
154+
20% {
155+
height: 62px;
156+
opacity: 1;
157+
}
158+
95% {
159+
height: 62px;
160+
opacity: 1;
161+
}
162+
100% {
163+
height: 62px;
164+
opacity: 0;
165+
}
166+
}
167+
.coffee-medium__liquid {
168+
width: 6px;
169+
height: 63px;
170+
opacity: 0;
171+
position: absolute;
172+
top: 50px;
173+
left: calc(50% - 3px);
174+
background-color: #74372b;
175+
animation: liquid 4s 4s linear infinite;
176+
}
177+
.coffee-medium__smoke {
178+
width: 8px;
179+
height: 20px;
180+
position: absolute;
181+
border-radius: 5px;
182+
background-color: #b3aeae;
183+
}
184+
@keyframes smokeOne {
185+
0% {
186+
bottom: 20px;
187+
opacity: 0;
188+
}
189+
40% {
190+
bottom: 50px;
191+
opacity: .5;
192+
}
193+
80% {
194+
bottom: 80px;
195+
opacity: .3;
196+
}
197+
100% {
198+
bottom: 80px;
199+
opacity: 0;
200+
}
201+
}
202+
@keyframes smokeTwo {
203+
0% {
204+
bottom: 40px;
205+
opacity: 0;
206+
}
207+
40% {
208+
bottom: 70px;
209+
opacity: .5;
210+
}
211+
80% {
212+
bottom: 80px;
213+
opacity: .3;
214+
}
215+
100% {
216+
bottom: 80px;
217+
opacity: 0;
218+
}
219+
}
220+
.coffee-medium__smoke-one {
221+
opacity: 0;
222+
bottom: 50px;
223+
left: 102px;
224+
animation: smokeOne 3s 4s linear infinite;
225+
}
226+
.coffee-medium__smoke-two {
227+
opacity: 0;
228+
bottom: 70px;
229+
left: 118px;
230+
animation: smokeTwo 3s 5s linear infinite;
231+
}
232+
.coffee-medium__smoke-three {
233+
opacity: 0;
234+
bottom: 65px;
235+
right: 118px;
236+
animation: smokeTwo 3s 6s linear infinite;
237+
}
238+
.coffee-medium__smoke-for {
239+
opacity: 0;
240+
bottom: 50px;
241+
right: 102px;
242+
animation: smokeOne 3s 5s linear infinite;
243+
}
244+
.coffee-footer {
245+
width: 95%;
246+
height: 15px;
247+
position: absolute;
248+
bottom: 25px;
249+
left: calc(50% - 47.5%);
250+
background-color: #41bdad;
251+
border-radius: 10px;
252+
}
253+
.coffee-footer::after {
254+
content: "";
255+
width: 106%;
256+
height: 26px;
257+
position: absolute;
258+
bottom: -25px;
259+
left: -8px;
260+
background-color: #000;
261+
}

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,11 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
142142

143143
**[⬆ back to top](#quick-links)**
144144

145+
## <a id="cofeemachineanimation"></a>Cofee Machine Animation
146+
147+
<img src="images/cofeemachineanimation.png" height="230" title="Demo 1">
148+
149+
**[⬆ back to top](#quick-links)**
145150

146151
## <a id="Accordion"></a>Accordion / Toggle
147152

‎images/cofeemachineanimation.png

49.1 KB
Loading

0 commit comments

Comments
 (0)