Hello Friends, I will share another snippet on creating a bubble effect using HTML and CSS. No javascript or jquery during the coding process. I have shared a couple of CSS animation based project before. Check those projects out if you are interested.
In this project, I have made some round bubble which will animate from the bottom of the viewport. They will disappear while going up.
The HTML markup for this project is very simple and straightforward. in the HTML markup, I have taken a div named 'wrapper.' inside that div, I have taken ten span tags, and later, I will use them to make round shape bubble and animate. That is all for the HTML markup. I will suggest you to follow the below video from start to finish to understand the necessary coding behind it for this snippet.
I hope you watched the video till the end. Let's start with the CSS. First, I provided a random background image to the body and gave the body and 100vh height. After that, I gave all the span tags a particular height and width and a 50% border-radius. I gave them a fixed position and bottom value of -50px. I then set an animation named 'animate' with an animation-duration of 10s,animation-direction of linear, and animation-iteration-count of infinite. Then I gave each span a different left value and animation-delay. For the first five spans, I gave them a white background, and for the last five, I used black. Later I used CSS keyframes animation to move the spans from right to left and go up and disappear at one stage. I set different bottom values for each step of the animation for the bubble to appear one after another from the bottom.
Bubble effect using only html and css (Source Code)
For this project, you have to create one HTML file and CSS file and link the CSS file to your HTML file. After that, please copy the code below and paste them into a separate file. Save and open the project and see how it works.
HTML
CSS
I hope you liked this simple yet exciting project. Please follow divinector social media profiles and subscribe to my channel to stay connected. Thanks for stopping by.
1
Comments
Please Do not Enter any spam link in the comment box
hi ! this animation works very well and I integrated it on my website. But how can we end the bubbles at the end of a , instead of waiting they disappear at the top of my html page ?
hi ! this animation works very well and I integrated it on my website. But how can we end the bubbles at the end of a , instead of waiting they disappear at the top of my html page ?
ReplyDeletePost a Comment
Please Do not Enter any spam link in the comment box