Skip to content

Coffee cup mist animation #3213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Oct 31, 2025
Merged

Coffee cup mist animation #3213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1dd9128
added a pentagon animation
UserAkku Oct 31, 2025
f658c0c
Music On beats animation added
UserAkku Oct 31, 2025
8564d4c
add a coffee cup mis
UserAkku Oct 31, 2025
f0e7425
Delete Art/UserAkku-pentagon/style.css
UserAkku Oct 31, 2025
6a12240
Delete Art/UserAkku-pentagon/index.html
UserAkku Oct 31, 2025
3228e96
Delete Art/UserAkku-pentagon/meta.json
UserAkku Oct 31, 2025
837fbe7
Delete Art/UserAkku-Music-On/meta.json
UserAkku Oct 31, 2025
28a9a37
Delete Art/UserAkku-Music-On/index.html
UserAkku Oct 31, 2025
c621079
Delete Art/UserAkku-Music-On/style.css
UserAkku Oct 31, 2025
09a6e06
Fix stylesheet link in index.html
UserAkku Oct 31, 2025
6287dcd
Fix stylesheet link in index.html
UserAkku Oct 31, 2025
c32b5dd
Rename style.css to styles.css
UserAkku Oct 31, 2025
d497d43
Update index.html
UserAkku Oct 31, 2025
5bb4c1a
Enhance styles with animations for cup and steam
UserAkku Oct 31, 2025
c0b9cba
Merge branch 'master' into Coffee-Cup-UserAkku
LaurelineP Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions Art/UserAkku-Coffee-Cup-Animation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Cup Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="coffee-container">
<div class="cup">☕</div>
<div class="steam steam1"></div>
<div class="steam steam2"></div>
<div class="steam steam3"></div>
<div class="heart">❤️</div>
<div class="text">HOT & FRESH!</div>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions Art/UserAkku-Coffee-Cup-Animation/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"githubHandle": "UserAkku",
"artName": "Coffee Cup Animation"
}
130 changes: 130 additions & 0 deletions Art/UserAkku-Coffee-Cup-Animation/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2c3e50;
font-family: Arial, sans-serif;
overflow: hidden;
}

.coffee-container {
position: relative;
animation: bounce 2s ease-in-out infinite;
}

.cup {
font-size: 120px;
animation: tilt 3s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

@keyframes bounce {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}

@keyframes tilt {
0%, 100% {
transform: rotate(-3deg);
}
50% {
transform: rotate(3deg);
}
}

.steam {
position: absolute;
width: 8px;
height: 60px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
top: -10px;
filter: blur(8px);
animation: rise 2s ease-in-out infinite;
}

.steam1 {
left: 30%;
animation-delay: 0s;
}

.steam2 {
left: 50%;
animation-delay: 0.3s;
}

.steam3 {
left: 70%;
animation-delay: 0.6s;
}

@keyframes rise {
0% {
opacity: 0;
transform: translateY(0) scaleX(1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-80px) scaleX(1.5);
}
}

.text {
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
color: #ecf0f1;
font-size: 28px;
font-weight: bold;
white-space: nowrap;
animation: pulse-text 2s ease-in-out infinite;
text-shadow: 0 0 10px rgba(236, 240, 241, 0.5);
}

@keyframes pulse-text {
0%, 100% {
opacity: 0.7;
transform: translateX(-50%) scale(0.95);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1);
}
}

.heart {
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
animation: float-heart 3s ease-in-out infinite;
}

@keyframes float-heart {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0) rotate(0deg);
}
30% {
opacity: 1;
transform: translate(-50%, -80%) scale(1) rotate(10deg);
}
60% {
opacity: 1;
transform: translate(-50%, -120%) scale(1.2) rotate(-10deg);
}
100% {
opacity: 0;
transform: translate(-50%, -180%) scale(0.8) rotate(0deg);
}
}