CSS circular sound wave animation

CSS Circular Sound Wave Animation

In web design, animation effects can enhance user experience and make web pages more vivid and interesting. CSS animations are a simple and practical way to achieve this. In this article, we’ll learn how to create a circular sound wave animation effect using CSS.

How it works

Our sound wave animation effect is primarily implemented using two components: the circular ring and the ripples.

Ring: Use CSS border and The border-radius property creates a circular element.
Ripple: Use the CSS pseudo-element ::after and the animation property to create a ripple effect.

HTML Structure

First, we need to create an HTML file and add a ring element with a ripple effect.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Sound Wave Animation</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<div class="circle"></div>

</body>

</html>

CSS Styles

Next, we need to add CSS styles to our circular sound wave animation.

body { 
display: flex; 
justify-content: center; 
align-items: center; 
height: 100vh; 
margin: 0; 
background-color: #f0f0f0; 
} 

.circle { 
width: 100px; 
height: 100px; 
border: 3px solid #3498db; 
border-radius: 50%; 
position: relative; 
} 

.circle::after { 
content: ""; 
display: block; 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
border: 3px solid #3498db; 
border-radius: 50%; 
animation: pulse 2s infinite linear; 
}

@keyframes pulse {
0% {
width: 100%;
height: 100%;
opacity: 1;
}
100% {
width: 300%;
height: 300%;
opacity: 0;
}
}

In the above code, we first set the page background color to light gray, then set the circle to blue, and add a 3px border and rounded corners. The ripple effect is achieved using the ::after pseudo-element, setting its width and height to 100% and applying a pulse animation with a duration of 2 seconds and an infinite loop.

Running Effect

Open the HTML file in a browser and you’ll see a circle with a sound wave animation effect.