Wave ball effect is a new entry in the world of animation effects that are used in the designing of modern web apps. In this effect, we have some balls which are animated like a wave. Now you can add different elements to it make it unique like a different color for balls and animation-delay or by changing the axis of animation.
Approach: The approach is to first create some small size balls and then use keyframes to animate them and also change the color of the balls on each frame division. Then we will be adding some animation-delay to each of the balls. Although, the animation delay part is optional.
HTML Code: In this section, we have created a number of span tags that will be used to make the balls. All of them are wrapped inside a div tag.
CSS Code: For CSS, follow the below given steps.
- Step 1: First, apply a dark background to the body tag.
- Step 2: Now align all the span tag to center of the page.
- Step 3: Now use animation property with identifier name animate.
- Step 4: Now use keyframes to to apply border and color for each frame division. Use transform on Y-axis.
- Step 5: Now use n-th child property to give some animation delay to each span tag.
Tip: Make sure the to keep the size of balls small and you can change the axis of animation to X-axis for a different effect.
Complete Code: It is the combination of the above two sections of code.
- How to create shock wave or explosion effect using HTML and CSS ?
- How to Create Wave Background using CSS ?
- How to Create a Wave Image for a Background using HTML and CSS ?
- How to Create Wave Loader using CSS?
- How to create Glowing Star effect using HTML and CSS?
- How to create fade-in effect on page load using CSS ?
- How to Create Paradoxical Effect using CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- Create a 3D Text Effect using HTML and CSS
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to create a bouncing bubble effect using CSS ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to Create Embossed Text Effect using CSS ?
- How to create followspot effect using HTML CSS and jQuery ?
- How to Create Floating Box Effect using HTML and CSS ?
- How to Create a GrayScale Effect using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.