CodeIShare

How to create a Music Wave Animation using Html and Css

Creating a music wave animation adds a dynamic and engaging element to your website. Here’s a simple guide on how to do it.
Table of Contents

What is a Music Wave?

A music wave is a visual representation of sound waves over time. Each bar or wave in the graph represents the intensity or amplitude of the sound at a given moment. It helps viewers understand the rhythm, intensity, and variations in the sound visually.

music wave animations

How to Create a Music Wave Animation Using HTML and CSS

Creating a music wave animation adds a dynamic and engaging element to your website. Here’s a simple guide on how to do it.

Step 1: Setting Up the HTML

First, set up the basic HTML structure with a container to hold the music waves. This will include multiple div elements representing the wave bars.

Step 2: Adding Basic Styles

Next, add basic CSS styles to position and style the wave elements. Center the waves on the screen and give each wave a fixed width, height, background color, and rounded corners.

Step 3: Creating the Wave Animation

Define keyframes for the wave animation to create a pulsing effect. Use the scaleY property to stretch each bar vertically, and apply different animation delays to each wave to make the animation more dynamic.

Step 4: Adding Responsiveness (Optional)

For responsiveness, use media queries to adjust the size and spacing of the waves based on the screen size.

Full Code

Demo: https://codeishare.com/demo/music_wave_animation.html

<!DOCTYPE html><html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>How to create a Music Wave Animation - HTML CSS</title>
 <style>
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     height: 100vh;
 }
 .music_wave {
     width: 150px;
     height: 50px;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: space-betwee;
 }
 .music_wave .wave {
     width: 5px;
     height: 30px;
     border-radius: 5px;
     animation: musicwave 1.5s ease-in-out infinite;
 }
 @keyframes musicwave {
     0%,
     100% {
     transform: scaleY(0.1);
 }
 50% {
    transform: scaleY(1);
 }
 }
 .music_wave .wave:nth-child(1) {
     background-color: #641e1e;
     animation-delay: 1s;
 }
 .music_wave .wave:nth-child(2) {
     background-color: #c54848;
     animation-delay: 0.8s;
 }
 .music_wave .wave:nth-child(3) {
     background-color: #641e1e;
     animation-delay: 0.6s;
 }
 .music_wave .wave:nth-child(4) {
     background-color: #c54848;
     animation-delay: 0.4s;
 }
 .music_wave .wave:nth-child(5) {
     background-color: #641e1e;
     animation-delay: 0.2s;
 }
 .music_wave .wave:nth-child(6) {
     background-color: #c54848;
     animation-delay: 0.2s;
 }
 .music_wave .wave:nth-child(7) {
     background-color: #641e1e;
     animation-delay: 0.4s;
 }
 .music_wave .wave:nth-child(8) {
     background-color: #c54848;
     animation-delay: 0.6s;
 }
 .music_wave .wave:nth-child(9) {
     background-color: #641e1e;
     animation-delay: 0.8s;
 }
 .music_wave .wave:nth-child(10) {
     background-color: #c54848;
     animation-delay: 1s;
 }
 </style>
 </head>
 <body>
     <div class="music_wave">
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
         <div class="wave"></div>
    </div>
 </body>
</html>
Share the Post:

Related Posts