Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a wave ball effect using CSS?
In this article, we use CSS to create a wave ball effect that can offer a unique and visually attractive touch to any website or application. This effect can be used to make buttons, progress indicators, and other user interface elements stand out from the crowd. To achieve this effect, you will need to be familiar with several fundamental CSS properties such as border-radius, box-shadow, and animation.
Syntax
.wave-ball {
width: value;
height: value;
border-radius: 50%;
box-shadow: shadow-values;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
0% { /* initial state */ }
50% { /* mid state */ }
100% { /* final state */ }
}
Approaches
To generate a wave ball effect using CSS, there are numerous techniques that can be used. Among the most common approaches are
Using
box-shadowUsing
animated gradient
Let us look at each approach in detail with examples now.
Approach 1: Using box-shadow
The first approach to generate a wave ball effect using CSS is by using box-shadow. The box-shadow property is used to create multiple concentric shadows that animate to simulate wave ripples emanating from the ball.
Example
Following is an example of creating a wave ball effect using animated box shadows
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.wave-ball {
width: 80px;
height: 80px;
background-color: #007bff;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
animation: wave-pulse 2s ease-out infinite;
}
@keyframes wave-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7),
0 0 0 10px rgba(0, 123, 255, 0.4),
0 0 0 20px rgba(0, 123, 255, 0.2);
}
50% {
box-shadow: 0 0 0 20px rgba(0, 123, 255, 0),
0 0 0 30px rgba(0, 123, 255, 0.1),
0 0 0 40px rgba(0, 123, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7),
0 0 0 10px rgba(0, 123, 255, 0.4),
0 0 0 20px rgba(0, 123, 255, 0.2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="wave-ball"></div>
</div>
</body>
</html>
A blue circular ball appears with animated wave ripples that pulse outward and fade, creating a continuous wave effect around the ball.
Approach 2: Using animated gradient
The second approach creates a wave ball effect using an animated radial gradient. This method uses a dynamic gradient that changes position and intensity over time to simulate waves within the ball itself.
Example
Following is an example of creating a wave ball effect using an animated gradient
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.wave-ball-gradient {
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 40%, #00d4ff, #0099cc, #006699);
background-size: 200% 200%;
animation: wave-gradient 3s ease-in-out infinite;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
@keyframes wave-gradient {
0% {
background-position: 0% 50%;
transform: scale(1);
}
25% {
background-position: 100% 50%;
transform: scale(1.05);
}
50% {
background-position: 100% 100%;
transform: scale(1);
}
75% {
background-position: 0% 100%;
transform: scale(0.95);
}
100% {
background-position: 0% 50%;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="wave-ball-gradient"></div>
</div>
</body>
</html>
A blue circular ball with an animated gradient that shifts position and slightly scales up and down, creating an internal wave-like motion effect.
Conclusion
Creating a wave ball effect using CSS can be achieved through multiple approaches including box-shadow animations for external ripples and animated gradients for internal wave motion. Both techniques provide engaging visual effects that can enhance user interface elements.
491 Views
