Learn how to create a pure CSS sound bars animation using only HTML and CSS. No external libraries or frameworks required. Optional step for adding interactivity with JavaScript.
Table of Contents
This will be our fun project, Sound bars are one of the classic components used to create an attractive website. They are very simple to make and can be used as animations while recording sound.
In this tutorial, we will be creating a sound bars animation using only HTML and CSS, with an optional step for adding interactivity with JavaScript. This tutorial is aimed at beginners with some knowledge of HTML and CSS, and is a great introduction to creating animations without the need for external libraries or frameworks.
Let's start making these amazing sound bars Using HTML and pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file and define the basic structure. We will add a container div and several child divs to represent the sound bars.
In this example, we have created a container div with the ID "bars" and ten child divs with the class "bar". We will use these divs to create the sound bars.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our soundbars using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once we have defined the HTML structure, we can move on to styling the sound bars using CSS. We will define the initial styles for the container div and child divs, and add styles to adjust the width, height, margin, padding, background color, and position of the divs.
Now that we have styled the sound bars, we can create the animation using CSS. We will use CSS keyframes to define the animation and the specific keyframe points.
This will give our bars an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
background-color: #d6cbcb;
}
h1 {
color: #555;
font: bold 12px 'helvetica neue', helvetica, arial, sans-serif;
left: 0;
margin: 20px 0 0 0;
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
#bars {
height: 30px;
left: 50%;
margin: -30px 0 0 -20px;
position: absolute;
top: 50%;
width: 40px;
}
.bar {
background: #666;
bottom: 1px;
height: 3px;
position: absolute;
width: 3px;
animation: sound 0ms -800ms linear infinite alternate;
}
@keyframes sound {
0% {
opacity: .35;
height: 3px;
}
100% {
opacity: 1;
height: 28px;
}
}
.bar:nth-child(1) { left: 1px; animation-duration: 474ms; }
.bar:nth-child(2) { left: 5px; animation-duration: 433ms; }
.bar:nth-child(3) { left: 9px; animation-duration: 407ms; }
.bar:nth-child(4) { left: 13px; animation-duration: 458ms; }
.bar:nth-child(5) { left: 17px; animation-duration: 400ms; }
.bar:nth-child(6) { left: 21px; animation-duration: 427ms; }
.bar:nth-child(7) { left: 25px; animation-duration: 441ms; }
.bar:nth-child(8) { left: 29px; animation-duration: 419ms; }
.bar:nth-child(9) { left: 33px; animation-duration: 487ms; }
.bar:nth-child(10) { left: 37px; animation-duration: 442ms; } Final Output:
Conclusion:
In this tutorial, we have learned how to create a sound bars animation using only HTML and CSS. We have defined the basic HTML structure, styled the sound bars using CSS, created the animation using CSS keyframes, and added optional interactivity with JavaScript. This is a great introduction to creating animations without the need for external libraries or frameworks.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
