Skip to content

Commit 6f8988c

Browse files
UserAkkuLaurelineP
UserAkku
and
LaurelineP
authored
Coffee cup mist animation (#3213)
* added a pentagon animation * Music On beats animation added * add a coffee cup mis t animation * Delete Art/UserAkku-pentagon/style.css * Delete Art/UserAkku-pentagon/index.html * Delete Art/UserAkku-pentagon/meta.json * Delete Art/UserAkku-Music-On/meta.json * Delete Art/UserAkku-Music-On/index.html * Delete Art/UserAkku-Music-On/style.css * Fix stylesheet link in index.html * Fix stylesheet link in index.html * Rename style.css to styles.css * Update index.html * Enhance styles with animations for cup and steam Added animations for coffee cup and steam effects. --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent 01b8085 commit 6f8988c

File tree

3 files changed

+153
-0
lines changed

3 files changed

+153
-0
lines changed

‎Art/UserAkku-Coffee-Cup-Animation/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Coffee Cup Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="coffee-container">
11+
<div class="cup">☕</div>
12+
<div class="steam steam1"></div>
13+
<div class="steam steam2"></div>
14+
<div class="steam steam3"></div>
15+
<div class="heart">❤️</div>
16+
<div class="text">HOT & FRESH!</div>
17+
</div>
18+
</body>
19+
</html>

‎Art/UserAkku-Coffee-Cup-Animation/meta.json‎

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

‎Art/UserAkku-Coffee-Cup-Animation/styles.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #2c3e50;
8+
font-family: Arial, sans-serif;
9+
overflow: hidden;
10+
}
11+
12+
.coffee-container {
13+
position: relative;
14+
animation: bounce 2s ease-in-out infinite;
15+
}
16+
17+
.cup {
18+
font-size: 120px;
19+
animation: tilt 3s ease-in-out infinite;
20+
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
21+
}
22+
23+
@keyframes bounce {
24+
0%, 100% {
25+
transform: translateY(0px);
26+
}
27+
50% {
28+
transform: translateY(-15px);
29+
}
30+
}
31+
32+
@keyframes tilt {
33+
0%, 100% {
34+
transform: rotate(-3deg);
35+
}
36+
50% {
37+
transform: rotate(3deg);
38+
}
39+
}
40+
41+
.steam {
42+
position: absolute;
43+
width: 8px;
44+
height: 60px;
45+
background: rgba(255, 255, 255, 0.6);
46+
border-radius: 50%;
47+
top: -10px;
48+
filter: blur(8px);
49+
animation: rise 2s ease-in-out infinite;
50+
}
51+
52+
.steam1 {
53+
left: 30%;
54+
animation-delay: 0s;
55+
}
56+
57+
.steam2 {
58+
left: 50%;
59+
animation-delay: 0.3s;
60+
}
61+
62+
.steam3 {
63+
left: 70%;
64+
animation-delay: 0.6s;
65+
}
66+
67+
@keyframes rise {
68+
0% {
69+
opacity: 0;
70+
transform: translateY(0) scaleX(1);
71+
}
72+
50% {
73+
opacity: 1;
74+
}
75+
100% {
76+
opacity: 0;
77+
transform: translateY(-80px) scaleX(1.5);
78+
}
79+
}
80+
81+
.text {
82+
position: absolute;
83+
bottom: -70px;
84+
left: 50%;
85+
transform: translateX(-50%);
86+
color: #ecf0f1;
87+
font-size: 28px;
88+
font-weight: bold;
89+
white-space: nowrap;
90+
animation: pulse-text 2s ease-in-out infinite;
91+
text-shadow: 0 0 10px rgba(236, 240, 241, 0.5);
92+
}
93+
94+
@keyframes pulse-text {
95+
0%, 100% {
96+
opacity: 0.7;
97+
transform: translateX(-50%) scale(0.95);
98+
}
99+
50% {
100+
opacity: 1;
101+
transform: translateX(-50%) scale(1);
102+
}
103+
}
104+
105+
.heart {
106+
position: absolute;
107+
font-size: 30px;
108+
top: 50%;
109+
left: 50%;
110+
animation: float-heart 3s ease-in-out infinite;
111+
}
112+
113+
@keyframes float-heart {
114+
0% {
115+
opacity: 0;
116+
transform: translate(-50%, -50%) scale(0) rotate(0deg);
117+
}
118+
30% {
119+
opacity: 1;
120+
transform: translate(-50%, -80%) scale(1) rotate(10deg);
121+
}
122+
60% {
123+
opacity: 1;
124+
transform: translate(-50%, -120%) scale(1.2) rotate(-10deg);
125+
}
126+
100% {
127+
opacity: 0;
128+
transform: translate(-50%, -180%) scale(0.8) rotate(0deg);
129+
}
130+
}

0 commit comments

Comments
 (0)