From 1dd9128200c8678442dff0f2a0358fe700867026 Mon Sep 17 00:00:00 2001 From: UserAkku Date: Fri, 31 Oct 2025 12:04:57 +0530 Subject: [PATCH 01/14] added a pentagon animation --- Art/UserAkku-pentagon/index.html | 18 +++++++ Art/UserAkku-pentagon/meta.json | 4 ++ Art/UserAkku-pentagon/style.css | 92 ++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 Art/UserAkku-pentagon/index.html create mode 100644 Art/UserAkku-pentagon/meta.json create mode 100644 Art/UserAkku-pentagon/style.css diff --git a/Art/UserAkku-pentagon/index.html b/Art/UserAkku-pentagon/index.html new file mode 100644 index 000000000..2b3c401d0 --- /dev/null +++ b/Art/UserAkku-pentagon/index.html @@ -0,0 +1,18 @@ + + + + + + Pentagon Animation + + + +
+
+
+
+
+
+
+ + diff --git a/Art/UserAkku-pentagon/meta.json b/Art/UserAkku-pentagon/meta.json new file mode 100644 index 000000000..5c15f2100 --- /dev/null +++ b/Art/UserAkku-pentagon/meta.json @@ -0,0 +1,4 @@ +{ + "githubHandle": "UserAkku", + "artName": "pentagon" +} \ No newline at end of file diff --git a/Art/UserAkku-pentagon/style.css b/Art/UserAkku-pentagon/style.css new file mode 100644 index 000000000..c311e5e0c --- /dev/null +++ b/Art/UserAkku-pentagon/style.css @@ -0,0 +1,92 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: #1a1a2e; + overflow: hidden; +} + +.container { + position: relative; + width: 400px; + height: 400px; +} + +.pentagon { + position: absolute; + width: 100px; + height: 100px; + clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); + animation: rotate 4s linear infinite; +} + +.pentagon:nth-child(1) { + background: #ff6b6b; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: spin 3s linear infinite, pulse 2s ease-in-out infinite; +} + +.pentagon:nth-child(2) { + background: #4ecdc4; + top: 20%; + left: 50%; + transform: translate(-50%, -50%); + animation: orbit 5s linear infinite; +} + +.pentagon:nth-child(3) { + background: #ffe66d; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + animation: orbit 5s linear infinite reverse; +} + +.pentagon:nth-child(4) { + background: #95e1d3; + top: 50%; + left: 20%; + transform: translate(-50%, -50%); + animation: orbit 6s linear infinite; + animation-delay: 1s; +} + +.pentagon:nth-child(5) { + background: #f38181; + top: 50%; + left: 80%; + transform: translate(-50%, -50%); + animation: orbit 6s linear infinite reverse; + animation-delay: 1s; +} + +@keyframes spin { + 0% { + transform: translate(-50%, -50%) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +@keyframes pulse { + 0%, 100% { + transform: translate(-50%, -50%) scale(1); + } + 50% { + transform: translate(-50%, -50%) scale(1.3); + } +} + +@keyframes orbit { + 0% { + transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg); + } + 100% { + transform: translate(-50%, -50%) rotate(360deg) translateX(120px) rotate(-360deg); + } +} From f658c0c6cdac97c02cbdbac68ba3838fc437fbbb Mon Sep 17 00:00:00 2001 From: UserAkku Date: Fri, 31 Oct 2025 12:46:02 +0530 Subject: [PATCH 02/14] Music On beats animation added --- Art/UserAkku-Music-On/index.html | 21 +++++++++ Art/UserAkku-Music-On/meta.json | 4 ++ Art/UserAkku-Music-On/style.css | 77 ++++++++++++++++++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 Art/UserAkku-Music-On/index.html create mode 100644 Art/UserAkku-Music-On/meta.json create mode 100644 Art/UserAkku-Music-On/style.css diff --git a/Art/UserAkku-Music-On/index.html b/Art/UserAkku-Music-On/index.html new file mode 100644 index 000000000..639def8d6 --- /dev/null +++ b/Art/UserAkku-Music-On/index.html @@ -0,0 +1,21 @@ + + + + + +Beats Hover Effect + + + +
+
🎧
+
+
+
+
+
+
+
MUSIC ON!
+
+ + \ No newline at end of file diff --git a/Art/UserAkku-Music-On/meta.json b/Art/UserAkku-Music-On/meta.json new file mode 100644 index 000000000..263b4c1cd --- /dev/null +++ b/Art/UserAkku-Music-On/meta.json @@ -0,0 +1,4 @@ +{ + "githubHandle": "UserAkku", + "artName": "Music On" +} \ No newline at end of file diff --git a/Art/UserAkku-Music-On/style.css b/Art/UserAkku-Music-On/style.css new file mode 100644 index 000000000..b2372dc2a --- /dev/null +++ b/Art/UserAkku-Music-On/style.css @@ -0,0 +1,77 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: #1a1a1a; + font-family: Arial, sans-serif; +} + +.beats-container { + position: relative; + cursor: pointer; +} + +.beats { + font-size: 100px; + transition: all 0.3s ease; +} + +.beats-container:hover .beats { + transform: scale(1.2) rotate(15deg); + filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); +} + +.wave { + position: absolute; + width: 10px; + height: 40px; + background: white; + border-radius: 10px; + opacity: 0; + transition: all 0.3s ease; +} + +.wave1 { left: -40px; top: 50%; transform: translateY(-50%); } +.wave2 { left: -70px; top: 50%; transform: translateY(-50%); } +.wave3 { left: -100px; top: 50%; transform: translateY(-50%); } +.wave4 { right: -40px; top: 50%; transform: translateY(-50%); } +.wave5 { right: -70px; top: 50%; transform: translateY(-50%); } +.wave6 { right: -100px; top: 50%; transform: translateY(-50%); } + +.beats-container:hover .wave { + opacity: 0.8; + animation: pulse 0.6s ease-in-out infinite; +} + +.beats-container:hover .wave1, +.beats-container:hover .wave4 { animation-delay: 0s; } + +.beats-container:hover .wave2, +.beats-container:hover .wave5 { animation-delay: 0.1s; } + +.beats-container:hover .wave3, +.beats-container:hover .wave6 { animation-delay: 0.2s; } + +@keyframes pulse { + 0%, 100% { height: 40px; } + 50% { height: 80px; } +} + +.text { + position: absolute; + bottom: -60px; + left: 50%; + transform: translateX(-50%); + color: white; + font-size: 24px; + font-weight: bold; + opacity: 0; + transition: opacity 0.3s ease; + white-space: nowrap; +} + +.beats-container:hover .text { + opacity: 1; +} \ No newline at end of file From 8564d4c9e51ab98717acfcc159c049f4c7eba95a Mon Sep 17 00:00:00 2001 From: UserAkku Date: Fri, 31 Oct 2025 13:14:29 +0530 Subject: [PATCH 03/14] add a coffee cup mis t animation --- Art/UserAkku-Coffee-Cup-Animation/index.html | 19 ++++ Art/UserAkku-Coffee-Cup-Animation/meta.json | 4 + Art/UserAkku-Coffee-Cup-Animation/style.css | 104 +++++++++++++++++++ 3 files changed, 127 insertions(+) create mode 100644 Art/UserAkku-Coffee-Cup-Animation/index.html create mode 100644 Art/UserAkku-Coffee-Cup-Animation/meta.json create mode 100644 Art/UserAkku-Coffee-Cup-Animation/style.css diff --git a/Art/UserAkku-Coffee-Cup-Animation/index.html b/Art/UserAkku-Coffee-Cup-Animation/index.html new file mode 100644 index 000000000..cd8e22484 --- /dev/null +++ b/Art/UserAkku-Coffee-Cup-Animation/index.html @@ -0,0 +1,19 @@ + + + + + +Coffee Cup Animation + + + +
+
☕
+
+
+
+
❤️
+
HOT & FRESH!
+
+ + \ No newline at end of file diff --git a/Art/UserAkku-Coffee-Cup-Animation/meta.json b/Art/UserAkku-Coffee-Cup-Animation/meta.json new file mode 100644 index 000000000..c9d1ceff4 --- /dev/null +++ b/Art/UserAkku-Coffee-Cup-Animation/meta.json @@ -0,0 +1,4 @@ +{ + "githubHandle": "UserAkku", + "artName": "Coffee Cup Animation" +} \ No newline at end of file diff --git a/Art/UserAkku-Coffee-Cup-Animation/style.css b/Art/UserAkku-Coffee-Cup-Animation/style.css new file mode 100644 index 000000000..71af2be36 --- /dev/null +++ b/Art/UserAkku-Coffee-Cup-Animation/style.css @@ -0,0 +1,104 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: #2c3e50; + font-family: Arial, sans-serif; +} + +.coffee-container { + position: relative; + cursor: pointer; +} + +.cup { + font-size: 120px; + transition: transform 0.4s ease; +} + +.coffee-container:hover .cup { + transform: translateY(-20px); +} + +.steam { + position: absolute; + width: 8px; + height: 60px; + background: rgba(255, 255, 255, 0.6); + border-radius: 50%; + top: -10px; + opacity: 0; + filter: blur(8px); +} + +.steam1 { left: 30%; } +.steam2 { left: 50%; } +.steam3 { left: 70%; } + +.coffee-container:hover .steam { + animation: rise 2s ease-in-out infinite; +} + +.coffee-container:hover .steam1 { animation-delay: 0s; } +.coffee-container:hover .steam2 { animation-delay: 0.3s; } +.coffee-container:hover .steam3 { 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; + opacity: 0; + transition: opacity 0.4s ease; + white-space: nowrap; +} + +.coffee-container:hover .text { + opacity: 1; +} + +.heart { + position: absolute; + font-size: 30px; + opacity: 0; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.coffee-container:hover .heart { + animation: float 1.5s ease-out forwards; +} + +@keyframes float { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: translate(-50%, -150%) scale(1.5); + } +} \ No newline at end of file From f0e7425e91cf63e6229a341d53cf73cb8bc6e89d Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:56:29 +0530 Subject: [PATCH 04/14] Delete Art/UserAkku-pentagon/style.css --- Art/UserAkku-pentagon/style.css | 92 --------------------------------- 1 file changed, 92 deletions(-) delete mode 100644 Art/UserAkku-pentagon/style.css diff --git a/Art/UserAkku-pentagon/style.css b/Art/UserAkku-pentagon/style.css deleted file mode 100644 index c311e5e0c..000000000 --- a/Art/UserAkku-pentagon/style.css +++ /dev/null @@ -1,92 +0,0 @@ -body { - margin: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background: #1a1a2e; - overflow: hidden; -} - -.container { - position: relative; - width: 400px; - height: 400px; -} - -.pentagon { - position: absolute; - width: 100px; - height: 100px; - clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); - animation: rotate 4s linear infinite; -} - -.pentagon:nth-child(1) { - background: #ff6b6b; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation: spin 3s linear infinite, pulse 2s ease-in-out infinite; -} - -.pentagon:nth-child(2) { - background: #4ecdc4; - top: 20%; - left: 50%; - transform: translate(-50%, -50%); - animation: orbit 5s linear infinite; -} - -.pentagon:nth-child(3) { - background: #ffe66d; - top: 80%; - left: 50%; - transform: translate(-50%, -50%); - animation: orbit 5s linear infinite reverse; -} - -.pentagon:nth-child(4) { - background: #95e1d3; - top: 50%; - left: 20%; - transform: translate(-50%, -50%); - animation: orbit 6s linear infinite; - animation-delay: 1s; -} - -.pentagon:nth-child(5) { - background: #f38181; - top: 50%; - left: 80%; - transform: translate(-50%, -50%); - animation: orbit 6s linear infinite reverse; - animation-delay: 1s; -} - -@keyframes spin { - 0% { - transform: translate(-50%, -50%) rotate(0deg); - } - 100% { - transform: translate(-50%, -50%) rotate(360deg); - } -} - -@keyframes pulse { - 0%, 100% { - transform: translate(-50%, -50%) scale(1); - } - 50% { - transform: translate(-50%, -50%) scale(1.3); - } -} - -@keyframes orbit { - 0% { - transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg); - } - 100% { - transform: translate(-50%, -50%) rotate(360deg) translateX(120px) rotate(-360deg); - } -} From 6a12240fa8dbe9e5d8ce131af5095ea47578f62f Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:57:00 +0530 Subject: [PATCH 05/14] Delete Art/UserAkku-pentagon/index.html --- Art/UserAkku-pentagon/index.html | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 Art/UserAkku-pentagon/index.html diff --git a/Art/UserAkku-pentagon/index.html b/Art/UserAkku-pentagon/index.html deleted file mode 100644 index 2b3c401d0..000000000 --- a/Art/UserAkku-pentagon/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - Pentagon Animation - - - -
-
-
-
-
-
-
- - From 3228e96276b552dc73460ea2cf3f6ccaf4adfdd6 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:57:18 +0530 Subject: [PATCH 06/14] Delete Art/UserAkku-pentagon/meta.json --- Art/UserAkku-pentagon/meta.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 Art/UserAkku-pentagon/meta.json diff --git a/Art/UserAkku-pentagon/meta.json b/Art/UserAkku-pentagon/meta.json deleted file mode 100644 index 5c15f2100..000000000 --- a/Art/UserAkku-pentagon/meta.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "githubHandle": "UserAkku", - "artName": "pentagon" -} \ No newline at end of file From 837fbe7f4d05aba32e710aa1045022d86276bd74 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:57:47 +0530 Subject: [PATCH 07/14] Delete Art/UserAkku-Music-On/meta.json --- Art/UserAkku-Music-On/meta.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 Art/UserAkku-Music-On/meta.json diff --git a/Art/UserAkku-Music-On/meta.json b/Art/UserAkku-Music-On/meta.json deleted file mode 100644 index 263b4c1cd..000000000 --- a/Art/UserAkku-Music-On/meta.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "githubHandle": "UserAkku", - "artName": "Music On" -} \ No newline at end of file From 28a9a378a1074209d3b8fd58781122cc0d667f69 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:58:13 +0530 Subject: [PATCH 08/14] Delete Art/UserAkku-Music-On/index.html --- Art/UserAkku-Music-On/index.html | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 Art/UserAkku-Music-On/index.html diff --git a/Art/UserAkku-Music-On/index.html b/Art/UserAkku-Music-On/index.html deleted file mode 100644 index 639def8d6..000000000 --- a/Art/UserAkku-Music-On/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -Beats Hover Effect - - - -
-
🎧
-
-
-
-
-
-
-
MUSIC ON!
-
- - \ No newline at end of file From c6210796682e47414d3135d098f80398bc3800c5 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:58:25 +0530 Subject: [PATCH 09/14] Delete Art/UserAkku-Music-On/style.css --- Art/UserAkku-Music-On/style.css | 77 --------------------------------- 1 file changed, 77 deletions(-) delete mode 100644 Art/UserAkku-Music-On/style.css diff --git a/Art/UserAkku-Music-On/style.css b/Art/UserAkku-Music-On/style.css deleted file mode 100644 index b2372dc2a..000000000 --- a/Art/UserAkku-Music-On/style.css +++ /dev/null @@ -1,77 +0,0 @@ -body { - margin: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background: #1a1a1a; - font-family: Arial, sans-serif; -} - -.beats-container { - position: relative; - cursor: pointer; -} - -.beats { - font-size: 100px; - transition: all 0.3s ease; -} - -.beats-container:hover .beats { - transform: scale(1.2) rotate(15deg); - filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); -} - -.wave { - position: absolute; - width: 10px; - height: 40px; - background: white; - border-radius: 10px; - opacity: 0; - transition: all 0.3s ease; -} - -.wave1 { left: -40px; top: 50%; transform: translateY(-50%); } -.wave2 { left: -70px; top: 50%; transform: translateY(-50%); } -.wave3 { left: -100px; top: 50%; transform: translateY(-50%); } -.wave4 { right: -40px; top: 50%; transform: translateY(-50%); } -.wave5 { right: -70px; top: 50%; transform: translateY(-50%); } -.wave6 { right: -100px; top: 50%; transform: translateY(-50%); } - -.beats-container:hover .wave { - opacity: 0.8; - animation: pulse 0.6s ease-in-out infinite; -} - -.beats-container:hover .wave1, -.beats-container:hover .wave4 { animation-delay: 0s; } - -.beats-container:hover .wave2, -.beats-container:hover .wave5 { animation-delay: 0.1s; } - -.beats-container:hover .wave3, -.beats-container:hover .wave6 { animation-delay: 0.2s; } - -@keyframes pulse { - 0%, 100% { height: 40px; } - 50% { height: 80px; } -} - -.text { - position: absolute; - bottom: -60px; - left: 50%; - transform: translateX(-50%); - color: white; - font-size: 24px; - font-weight: bold; - opacity: 0; - transition: opacity 0.3s ease; - white-space: nowrap; -} - -.beats-container:hover .text { - opacity: 1; -} \ No newline at end of file From 09a6e0629e9f90141b724efcd8d0f918b71a4f2f Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:58:52 +0530 Subject: [PATCH 10/14] Fix stylesheet link in index.html --- Art/UserAkku-Coffee-Cup-Animation/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Art/UserAkku-Coffee-Cup-Animation/index.html b/Art/UserAkku-Coffee-Cup-Animation/index.html index cd8e22484..486b76bbb 100644 --- a/Art/UserAkku-Coffee-Cup-Animation/index.html +++ b/Art/UserAkku-Coffee-Cup-Animation/index.html @@ -4,7 +4,7 @@ Coffee Cup Animation - +
@@ -16,4 +16,4 @@
HOT & FRESH!
- \ No newline at end of file + From 6287dcd042330ba8d9fcd353b3d5e2ce86666f29 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:00:43 +0530 Subject: [PATCH 11/14] Fix stylesheet link in index.html --- Art/UserAkku-Coffee-Cup-Animation/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Art/UserAkku-Coffee-Cup-Animation/index.html b/Art/UserAkku-Coffee-Cup-Animation/index.html index 486b76bbb..2e7ebc544 100644 --- a/Art/UserAkku-Coffee-Cup-Animation/index.html +++ b/Art/UserAkku-Coffee-Cup-Animation/index.html @@ -4,7 +4,7 @@ Coffee Cup Animation - +
From c32b5dde254f19690700ef69d648fb2f49129b74 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:01:08 +0530 Subject: [PATCH 12/14] Rename style.css to styles.css --- Art/UserAkku-Coffee-Cup-Animation/{style.css => styles.css} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename Art/UserAkku-Coffee-Cup-Animation/{style.css => styles.css} (99%) diff --git a/Art/UserAkku-Coffee-Cup-Animation/style.css b/Art/UserAkku-Coffee-Cup-Animation/styles.css similarity index 99% rename from Art/UserAkku-Coffee-Cup-Animation/style.css rename to Art/UserAkku-Coffee-Cup-Animation/styles.css index 71af2be36..fc98f7999 100644 --- a/Art/UserAkku-Coffee-Cup-Animation/style.css +++ b/Art/UserAkku-Coffee-Cup-Animation/styles.css @@ -101,4 +101,4 @@ body { opacity: 0; transform: translate(-50%, -150%) scale(1.5); } -} \ No newline at end of file +} From d497d43f3b2aa0cd7fceff107a5195a7ee7d6ed2 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:07:50 +0530 Subject: [PATCH 13/14] Update index.html --- Art/UserAkku-Coffee-Cup-Animation/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Art/UserAkku-Coffee-Cup-Animation/index.html b/Art/UserAkku-Coffee-Cup-Animation/index.html index 2e7ebc544..7b9a702e1 100644 --- a/Art/UserAkku-Coffee-Cup-Animation/index.html +++ b/Art/UserAkku-Coffee-Cup-Animation/index.html @@ -4,7 +4,7 @@ Coffee Cup Animation - +
From 5bb4c1a8911dda0e86ee54fc8841b3d190cb1caa Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:47:03 +0530 Subject: [PATCH 14/14] Enhance styles with animations for cup and steam Added animations for coffee cup and steam effects. --- Art/UserAkku-Coffee-Cup-Animation/styles.css | 80 +++++++++++++------- 1 file changed, 53 insertions(+), 27 deletions(-) diff --git a/Art/UserAkku-Coffee-Cup-Animation/styles.css b/Art/UserAkku-Coffee-Cup-Animation/styles.css index fc98f7999..f6190c2c8 100644 --- a/Art/UserAkku-Coffee-Cup-Animation/styles.css +++ b/Art/UserAkku-Coffee-Cup-Animation/styles.css @@ -6,20 +6,36 @@ body { align-items: center; background: #2c3e50; font-family: Arial, sans-serif; + overflow: hidden; } .coffee-container { position: relative; - cursor: pointer; + animation: bounce 2s ease-in-out infinite; } .cup { font-size: 120px; - transition: transform 0.4s ease; + animation: tilt 3s ease-in-out infinite; + filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)); } -.coffee-container:hover .cup { - transform: translateY(-20px); +@keyframes bounce { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-15px); + } +} + +@keyframes tilt { + 0%, 100% { + transform: rotate(-3deg); + } + 50% { + transform: rotate(3deg); + } } .steam { @@ -29,21 +45,24 @@ body { background: rgba(255, 255, 255, 0.6); border-radius: 50%; top: -10px; - opacity: 0; filter: blur(8px); + animation: rise 2s ease-in-out infinite; } -.steam1 { left: 30%; } -.steam2 { left: 50%; } -.steam3 { left: 70%; } +.steam1 { + left: 30%; + animation-delay: 0s; +} -.coffee-container:hover .steam { - animation: rise 2s ease-in-out infinite; +.steam2 { + left: 50%; + animation-delay: 0.3s; } -.coffee-container:hover .steam1 { animation-delay: 0s; } -.coffee-container:hover .steam2 { animation-delay: 0.3s; } -.coffee-container:hover .steam3 { animation-delay: 0.6s; } +.steam3 { + left: 70%; + animation-delay: 0.6s; +} @keyframes rise { 0% { @@ -67,38 +86,45 @@ body { color: #ecf0f1; font-size: 28px; font-weight: bold; - opacity: 0; - transition: opacity 0.4s ease; white-space: nowrap; + animation: pulse-text 2s ease-in-out infinite; + text-shadow: 0 0 10px rgba(236, 240, 241, 0.5); } -.coffee-container:hover .text { - opacity: 1; +@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; - opacity: 0; top: 50%; left: 50%; - transform: translate(-50%, -50%); + animation: float-heart 3s ease-in-out infinite; } -.coffee-container:hover .heart { - animation: float 1.5s ease-out forwards; -} - -@keyframes float { +@keyframes float-heart { 0% { opacity: 0; - transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0) rotate(0deg); } - 50% { + 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%, -150%) scale(1.5); + transform: translate(-50%, -180%) scale(0.8) rotate(0deg); } }