Creating a visually appealing website doesn't just depend on good content, it also depends on how dynamic its look is. We think this is 100% true, especially for today's websites. One powerful way to make that website dynamic or enhance its experience is to use animated backgrounds. This subtle movement and interaction in the background of the website header or homepage can add personality and direct focus. It also helps to make the site more memorable. In today's blog post, we will share with you a CSS animation snippet to create animated bubbles or floating elements in the background. The video tutorial below shows the process of creating this CSS animation snippet.
Video Tutorial:
We hope you have watched the above video tutorial about animated background or background animation. Animated backgrounds are a visual effect that continuously moves or changes the elements located in the background of any web layout. These types of animated backgrounds give a sense of life to a web page. We see many types of background animations on websites these days. Some of them are floating particles, bouncing balls, shifting gradients, rotating shapes, etc. Animated backgrounds play an important role in adding depth and movement to a website, subtly attracting the attention of the viewer, enhancing the storytelling ability, and increasing the visual appeal of the site. When done correctly, these background animations leave a lasting impression on the users and create a tendency to come back again and again.
The HTML structure of our snippet starts with a <div> container called the wrapper. This <div> will act as the canvas for our design. Inside it, we've added a title that says "Animated Background". Inside that, we've added another <div> called 'box' that contains 10 smaller div elements, each with a span element with the class named dot. Here, the dot-containing divs represent the bubbles.
In CSS, the wrapper <div> covers the entire screen. We've given the background of this snippet a gradient color from deep purple to a dark shade, like the night sky. The title is centered on the page and styled with a large font, white to stand out against the gradient background, like the night. Each <div> element inside the 'box' is styled with a rounded border using border-radius. The main animation is applied to each bubble using the CSS keyframes property. The animation changes the size (scale), vertical position (translateY), and rotation (rotate) of the bubbles. In this animation, each bubble grows slightly as it animates, floating upward, rotating, and fading.
You May Also Like:
To create this animated background or background animation project, you need to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into the files. If you want, you can also download the source code by clicking the download button below this blog post.
The HTML structure of our snippet starts with a <div> container called the wrapper. This <div> will act as the canvas for our design. Inside it, we've added a title that says "Animated Background". Inside that, we've added another <div> called 'box' that contains 10 smaller div elements, each with a span element with the class named dot. Here, the dot-containing divs represent the bubbles.
In CSS, the wrapper <div> covers the entire screen. We've given the background of this snippet a gradient color from deep purple to a dark shade, like the night sky. The title is centered on the page and styled with a large font, white to stand out against the gradient background, like the night. Each <div> element inside the 'box' is styled with a rounded border using border-radius. The main animation is applied to each bubble using the CSS keyframes property. The animation changes the size (scale), vertical position (translateY), and rotation (rotate) of the bubbles. In this animation, each bubble grows slightly as it animates, floating upward, rotating, and fading.
You May Also Like:
CSS Animated Background with Bubbles [ Source Code ]:
To create this animated background or background animation project, you need to create an HTML and a CSS file. Then, copy the code from the code box below and paste it into the files. If you want, you can also download the source code by clicking the download button below this blog post.
ADD HTML:
ADD CSS:
Animated backgrounds are a design tool that determines how users feel and interact with your website. These types of CSS background animations give a website a professional and polished look without the need for JavaScript or heavy resources. With just a few lines of HTML and CSS, you can make a static page memorable and eye-catching with this CSS animated background snippet. Hope you have collected this snippet. To get more source code of this type, click on the "Load More" button at the bottom of our website homepage. Thanks for visiting our website.
Post a Comment
Please Do not Enter any spam link in the comment box