From 1dd9128200c8678442dff0f2a0358fe700867026 Mon Sep 17 00:00:00 2001 From: UserAkku Date: Fri, 31 Oct 2025 12:04:57 +0530 Subject: [PATCH 01/10] 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/10] 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 a7e74fe740abe1435f3a990c742ae508930ca19a Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:51:46 +0530 Subject: [PATCH 03/10] 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 f48d0db8e0156077385ad1be62e1e8d77ab14c38 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:52:02 +0530 Subject: [PATCH 04/10] 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 d80b70ed059c5f62548a0914fba1c2b5d3fc1c69 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:52:25 +0530 Subject: [PATCH 05/10] 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 235eab5d74573ed249c2cba932c707e92e160788 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 16:53:28 +0530 Subject: [PATCH 06/10] Fix stylesheet link path in index.html --- Art/UserAkku-Music-On/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Art/UserAkku-Music-On/index.html b/Art/UserAkku-Music-On/index.html index 639def8d6..4d355cd88 100644 --- a/Art/UserAkku-Music-On/index.html +++ b/Art/UserAkku-Music-On/index.html @@ -4,7 +4,7 @@ Beats Hover Effect - +
@@ -18,4 +18,4 @@
MUSIC ON!
- \ No newline at end of file + From cdc44e7f4f6667c087d45b4bbc888967feebb005 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:06:06 +0530 Subject: [PATCH 07/10] Fix stylesheet link in index.html --- Art/UserAkku-Music-On/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Art/UserAkku-Music-On/index.html b/Art/UserAkku-Music-On/index.html index 4d355cd88..eab14cd2d 100644 --- a/Art/UserAkku-Music-On/index.html +++ b/Art/UserAkku-Music-On/index.html @@ -4,7 +4,7 @@ Beats Hover Effect - +
From 2e2919995123523e7e1ae69bc5e39cfbc7a134cb Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:06:27 +0530 Subject: [PATCH 08/10] Rename style.css to styles.css --- Art/UserAkku-Music-On/{style.css => styles.css} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename Art/UserAkku-Music-On/{style.css => styles.css} (99%) diff --git a/Art/UserAkku-Music-On/style.css b/Art/UserAkku-Music-On/styles.css similarity index 99% rename from Art/UserAkku-Music-On/style.css rename to Art/UserAkku-Music-On/styles.css index b2372dc2a..ee61f28e0 100644 --- a/Art/UserAkku-Music-On/style.css +++ b/Art/UserAkku-Music-On/styles.css @@ -74,4 +74,4 @@ body { .beats-container:hover .text { opacity: 1; -} \ No newline at end of file +} From 875b8e15610374191e92df0cdf6ba88acb427766 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:36:18 +0530 Subject: [PATCH 09/10] Update wave animation and opacity in styles.css --- Art/UserAkku-Music-On/styles.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Art/UserAkku-Music-On/styles.css b/Art/UserAkku-Music-On/styles.css index ee61f28e0..780548fe4 100644 --- a/Art/UserAkku-Music-On/styles.css +++ b/Art/UserAkku-Music-On/styles.css @@ -23,14 +23,16 @@ body { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); } +/* Waves */ .wave { position: absolute; width: 10px; height: 40px; background: white; border-radius: 10px; - opacity: 0; - transition: all 0.3s ease; + opacity: 0.8; + animation: pulse 0.6s ease-in-out infinite; + animation-play-state: paused; /* 👈 Animation is paused by default */ } .wave1 { left: -40px; top: 50%; transform: translateY(-50%); } @@ -41,8 +43,7 @@ body { .wave6 { right: -100px; top: 50%; transform: translateY(-50%); } .beats-container:hover .wave { - opacity: 0.8; - animation: pulse 0.6s ease-in-out infinite; + animation-play-state: running; /* 👈 Resume animation on hover */ } .beats-container:hover .wave1, From cce67e4b73c87f9807ad7028c13b333d7c46fee7 Mon Sep 17 00:00:00 2001 From: Akhilesh kumar Date: Fri, 31 Oct 2025 17:43:55 +0530 Subject: [PATCH 10/10] Enhance styles with animations for beats and waves Added animations for beats and waves, enhancing visual effects. --- Art/UserAkku-Music-On/styles.css | 111 +++++++++++++++++++++++-------- 1 file changed, 82 insertions(+), 29 deletions(-) diff --git a/Art/UserAkku-Music-On/styles.css b/Art/UserAkku-Music-On/styles.css index 780548fe4..98e5726a7 100644 --- a/Art/UserAkku-Music-On/styles.css +++ b/Art/UserAkku-Music-On/styles.css @@ -6,58 +6,104 @@ body { align-items: center; background: #1a1a1a; font-family: Arial, sans-serif; + overflow: hidden; } .beats-container { position: relative; - cursor: pointer; + animation: float 3s ease-in-out infinite; } .beats { font-size: 100px; - transition: all 0.3s ease; + animation: rotate 4s ease-in-out infinite; + filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)); } -.beats-container:hover .beats { - transform: scale(1.2) rotate(15deg); - filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-20px); + } +} + +@keyframes rotate { + 0%, 100% { + transform: rotate(-5deg) scale(1); + } + 50% { + transform: rotate(5deg) scale(1.1); + } } /* Waves */ .wave { position: absolute; width: 10px; - height: 40px; - background: white; + background: linear-gradient(to top, #4CAF50, #8BC34A); border-radius: 10px; - opacity: 0.8; animation: pulse 0.6s ease-in-out infinite; - animation-play-state: paused; /* 👈 Animation is paused by default */ } -.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%); } +.wave1 { + left: -40px; + top: 50%; + transform: translateY(-50%); + height: 40px; + animation-delay: 0s; +} -.beats-container:hover .wave { - animation-play-state: running; /* 👈 Resume animation on hover */ +.wave2 { + left: -70px; + top: 50%; + transform: translateY(-50%); + height: 50px; + animation-delay: 0.1s; } -.beats-container:hover .wave1, -.beats-container:hover .wave4 { animation-delay: 0s; } +.wave3 { + left: -100px; + top: 50%; + transform: translateY(-50%); + height: 35px; + animation-delay: 0.2s; +} -.beats-container:hover .wave2, -.beats-container:hover .wave5 { animation-delay: 0.1s; } +.wave4 { + right: -40px; + top: 50%; + transform: translateY(-50%); + height: 40px; + animation-delay: 0s; +} -.beats-container:hover .wave3, -.beats-container:hover .wave6 { animation-delay: 0.2s; } +.wave5 { + right: -70px; + top: 50%; + transform: translateY(-50%); + height: 50px; + animation-delay: 0.1s; +} + +.wave6 { + right: -100px; + top: 50%; + transform: translateY(-50%); + height: 35px; + animation-delay: 0.2s; +} @keyframes pulse { - 0%, 100% { height: 40px; } - 50% { height: 80px; } + 0%, 100% { + transform: translateY(-50%) scaleY(1); + opacity: 0.8; + } + 50% { + transform: translateY(-50%) scaleY(1.8); + opacity: 1; + } } .text { @@ -68,11 +114,18 @@ body { color: white; font-size: 24px; font-weight: bold; - opacity: 0; - transition: opacity 0.3s ease; white-space: nowrap; + animation: glow 2s ease-in-out infinite; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } -.beats-container:hover .text { - opacity: 1; +@keyframes glow { + 0%, 100% { + opacity: 0.6; + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + } + 50% { + opacity: 1; + text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); + } }