Creating a Music Beats Animation with HTML and CSS ~ WebDev

Music has a rhythm that makes us move, and wouldn’t it be cool if we could visualize that rhythm on a website? In this tutorial, I'll show you how to create a simple music beats animation using just HTML and CSS. The animation mimics the rise and fall of audio waves, giving the illusion of beats pulsing in time. This is perfect for music-themed websites or as a fun addition to your personal portfolio.

The Concept

The core of this project is based on creating several bars (or "waves") that change height and color over time, simulating the motion of sound waves. We'll use CSS @keyframes to animate the bars and bring the beats to life.

HTML Structure

We start by setting up the basic HTML structure. It’s simple and consists of a container div with several child divs that will act as the individual waves.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Music Beats Animation</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>

<body>
    <div class="box">
        <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>

HTML Explanation

The HTML here is quite minimal. The key component is the box container that holds nine wave divs, each of which will represent a different bar in our music visualizer. The waves will be animated via CSS to pulse and change colors, simulating the movement of music beats.

CSS Styling and Animation

The visual magic happens in the CSS. We’ll start by styling the waves, then use the @keyframes rule to animate their height and color.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
}

.box {
    position: relative;
    height: 40vh;
    width: 40vh;
    background: rgba(255, 255, 225, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

.box::after {
    content: "@Developer Manoj";
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: -25%;
    z-index: 10;
    font-size: 3vh;
}

.wave {
    width: 10%;
    height: 30%;
    border-radius: 20px;
    box-shadow: inset 1px 1px 3px #333, 4px 4px 2rem whitesmoke;
}

.wave:nth-child(odd) {
    background: lime;
    transform: scaleY(2);
    animation-delay: 1.5s;
    animation: waverun 1s infinite ease-in-out;
}

.wave:nth-child(even) {
    background: hotpink;
    transform: scaleY(1);
    animation: waverun 2s infinite ease-in-out;
}

@keyframes waverun {
    0% {
        transform: scaleY(0.5);
        background: lime;
    }
    20% {
        transform: scaleY(2);
        background: deeppink;
    }
    40% {
        transform: scaleY(1);
        background: deepskyblue;
    }
    60% {
        transform: scaleY(0.5);
        background: deeppink;
    }
    80% {
        transform: scaleY(2);
        background: lime;
    }
    100% {
        transform: scaleY(1);
        background: white;
    }
}

.wave:nth-child(5) {
    height: 15%;
    background: white;
    transform: scaleY(1.5);
    animation: waverun 1s infinite ease-in-out;
}

CSS Explanation

Basic Setup:

We reset the default margins and paddings with * to ensure consistent layout across browsers.
The body is styled to center the content using flexbox, with a dark background to create contrast against the waves.

The box Class:

The box div is given a size (40vh x 40vh) and a semi-transparent background using rgba().
The backdrop-filter: blur(10px) adds a blurred effect behind the waves, giving it a modern, frosted glass appearance.

The wave Class:

Each wave is styled as a small rectangular bar with a border-radius for smooth edges and a shadow to add depth.
The nth-child pseudo-class is used to give alternating waves (odd and even) different colors and animations.

Animation with Keyframes:

The @keyframes rule defines the scaling and color transitions for the waves. Each wave scales vertically (scaleY) to simulate a pulsing motion.
As the wave height changes (from 0.5 to 2), the background color shifts from lime green to pink, sky blue, and white, adding dynamic visual interest.
The animation is continuous, running infinitely (infinite), and each wave starts at a slightly different time for a staggered effect.

Bringing it Together

This CSS and HTML combination brings the beats animation to life. By using CSS keyframes and the nth-child selector, we achieve a dynamic visual that mimics sound waves. The animation runs smoothly and adds a colorful, rhythmic effect to your web page.

This music beats animation is a fun and engaging way to add some movement and life to your website. Whether you want to create a visualizer for your music tracks or just add an eye-catching feature, this simple but effective use of HTML and CSS will do the job. The use of animations and shadows creates a 3D-like experience, making the beats appear to jump off the screen. Happy coding!

Feel free to copy the code and experiment with the animation speed, colors, and effects to suit your needs. You can also expand the animation to respond to actual music or user input for an even more interactive experience

WebDev

Thursday, September 26, 2024