How to create a bouncing bubble effect using CSS ?
One simple way of making a website more dynamic and attractive is to add some animations to it. One such animation is the bouncing bubble effect.
Approach: The basic idea is to create a section using <lspan> element, give it a round shape then by using the CSS animation property translateY the bubble can be moved up and down along the Y-axis. The following steps can be followed to obtain the desired result.
- Create a few containers using span element as follow:
<
div
class
=
"dot"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
- To make the containers look spherical, the border radius must be changed as: border-radius :50%;
- To give the spheres a bubble like effect the opacity and background color can be changed as: background-color :#DF0101; opacity :0.8;
- The position must be set to absolute and the bubbles can be set to any position accordingly.
- To make the effect more realistic the dimension can be changed as the bubble reaches the surface (i.e. increase the width and decrease the height).
- To make the bubbles move in an unordered form the animation-delay can be varied for different bubbles and the size can also be varied.
Example: This example implements the above approach.
<!DOCTYPE html> < html > < head > < title > How to create a bouncing bubble effect using CSS? </ title > < style > * { margin: 0; padding: 0; } /* To give the containers in spherical shape */ .dot { border-radius: 50%; } .dot span { position: absolute; display: block; border: 5px; border-radius: 50%; animation: animate 3s ease-in-out infinite; } /*the animation*/ @keyframes animate { 0% { transform: translateY(-300px); } 50% { transform: translateY(190px); width: -100px; height: +100px; } 100% { transform: translateY(-300px); } } /* Each bubble is defined in a separate section */ /* Set the color, opacity, delay and duration(i.e different speed) */ .dot span:nth-child(1) { top: 300px; left: 250px; height: 160px; width: 160px; background-color: yellow; opacity: 0.7; animation-delay: 0.3s; animation-direction: reverse; } .dot span:nth-child(2) { top: 310px; left: 400px; height: 190px; width: 190px; background-color: green; opacity: 0.9; animation-delay: 0.3s; animation-direction: reverse; animation-duration: 2.3s; } .dot span:nth-child(3) { top: 300px; left: 700px; height: 140px; width: 140px; background-color: #a97f58; opacity: 0.9; animation-delay: 0.5s; animation-direction: reverse; animation-duration: 2.6s; } .dot span:nth-child(4) { top: 300px; left: 1080px; height: 200px; width: 200px; background-color: #FA58AC; opacity: 0.9; animation-delay: 0.7s; animation-direction: reverse; animation-duration: 2.3s; } </ style > </ head > < body > < div class = "dot" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > </ body > </ html > |
Output:
This is just a simple animation, the more attractive things can be created by modifying or adding more animation effects to it.
Contact Us