Music on emoji withs beats animation

[UserAkku]

Beats Hover Animation

Description

An interactive hover animation featuring a headphone emoji (🎧) with animated sound waves and text effects. When you hover over the beats, it creates a music playback experience with pulsing sound waves on both sides.

Features

• Beats icon scales up and rotates on hover
• Animated sound wave bars that pulse rhythmically
• Glowing effect on hover
• "MUSIC ON!" text appears dynamically
• Clean dark theme with smooth transitions

Technologies Used

• HTML5
• CSS3
• CSS Animations & Transitions
• Flexbox for centering

Demo

Hover over the headphones to see the music come alive with animated sound waves!

---

Hacktoberfest 2025
This contribution is part of Hacktoberfest 2025. Happy coding!

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• HTML feedback for Art/UserAkku-pentagon/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-pentagon/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary

Happy Coding! 🚀

[LaurelineP]

Aloha @UserAkku !
It looks like you have duplicate labels because you likely created your new PR on top of a previous one, instead of checking out the master branch and starting fresh for each PR. This causes your previously submitted animation(s) to get included again in the new PR.

To fix this, make sure that for each PR, you remove any animation folders that do not belong to that specific PR.

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• Overall feedback
  Reminder: the contribution should have 3 files in a folder in Art

  • Missing in 1 of the 2 contributions folders
    - please add the missing html file in the folder Art/UserAkku-pentagon

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

• CSS feedback for Art/UserAkku-pentagon/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• Overall feedback
  Reminder: the contribution should have 3 files in a folder in Art

  • Missing in 1 of the 2 contributions folders
    - please add the missing html, css files in the folder Art/UserAkku-pentagon

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• HTML feedback for Art/UserAkku-Music-On/index.html

  • Incorrect stylesheet link: update the href so it points to the correct CSS file

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• CSS feedback for Art/UserAkku-Music-On/style.css

  • Incorrect filename: please rename as recommended or remove if unnecessary
  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• CSS feedback for Art/UserAkku-Music-On/styles.css

  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!
Before we can merge your submission, please address the following points.

Feedback

Tip

You can refer to README.md for additional guidance.

• CSS feedback for Art/UserAkku-Music-On/styles.css

  • Incorrect animation trigger: remove any pseudo elements with your animation(s) and attach the animation to the concerned element

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀

[github-actions]

Aloha @UserAkku 🙌 - Thanks for your contribution!

🎉 Your submission meets all pre-review requirements!
It’s now awaiting final validation from a maintainer.

Happy Coding! 🚀