Animated Bubbles Background using CSS

If we use static backgrounds for website design, it can become a bit boring. Instead, we can use animated types of backgrounds to bring our website to life and get the attention of users. Adding an animated background is one of the easiest and most enjoyable ways to make a website visit memorable for anyone. This blog post will share a CSS animation snippet about an animated bubble background. Before collecting the source code, please watch the video tutorial below.

Video Tutorial:

We hope you watched the above video tutorial on CSS Bubble Background Animation. For the creation of this visually appealing animated bubble background, we don't need JavaScript or fancy libraries. In this CSS animation snippet, we've created a clean layout with floating bubbles that slowly float upwards.

In the HTML part, we've used a wrapper div that acts as a canvas for our bubbles and spans the entire screen. For the background of the snippet, we've used a deep, dark cyan color to add contrast and calmness. In the center of the screen, we've added some text that will serve as the main message. The nine separate .box containers in this snippet will act as a launching point for an animated shape. To give it character and depth, we've outlined the bubble with a small dot. We've used CSS @keyframes to move the bubbles from the bottom of the screen to the top. This animation will show how bubbles float underwater. With the help of nth-child selectors, we placed the bubbles in different locations across the screen.

You May Also Like:

Animated Bubbles background using CSS [ Source Code ]:

To create this animated bubbles background using HTML and CSS snippets, you need to create an HTML and a CSS file. Then, you need to copy the code from the code box below and paste it into your files. If you want, you can download the source code by clicking the download button below this blog post.

ADD HTML:

<!doctype html> 
<html lang="en">
<!-- divinectorweb.com --> 
<head>
    <meta charset="UTF-8">
    <title>Animated Bubbles Background with HTML CSS</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="banner-text">
		<h2>Animated <span>Background</span></h2>
	</div>
	<div class="wrapper">
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
		<div class="box"><div><span class="dot"></span></div></div>
	</div>
	
</body>
</html>

ADD CSS:

body, html { 
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	background: darkcyan;
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	top: 0;
	left: 0;
}
.banner-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	font-size: 55px;
	text-align: center;
	margin: 0;
	box-shadow: 0 2px 20px #fff;
	border-radius: 25px;
	padding: 25px;
}
.banner-text h2 {
	margin: 0;
}
.banner-text h2 span {
	display: block;
	font-size: 65px;
	font-weight: 100;
	margin-top: -20px;
}
.box {
	position: absolute;
	bottom: -100px;
	animation: animate 15s infinite ease-in;
}
.box div {
	height: 60px;
	width: 60px;
	border: 2px solid #fff;
	border-radius: 50px;
	position: absolute;
	top: 10%;
	left: 10%;
	animation: 4s linear infinite;
}
.box div .dot {
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #fff;
	position: absolute;
	top: 20%;
	right: 20%;
}
.box:nth-child(1) {
	left: 7%;
	animation-delay: 1s;
}
.box:nth-child(2) {
	left: 20%;
	animation-delay: 5s;
}
.box:nth-child(3) {
	left: 40%;
	animation-delay: 9s;
}
.box:nth-child(4) {
	left: 50%;
	animation-delay: 2s;
}
.box:nth-child(5) {
	left: 27%;
	animation-delay: 10s;
}
.box:nth-child(6) {
	left: 65%;
	animation-delay: 5s;
}
.box:nth-child(7) {
	left: 80%;
	animation-delay: 9s;
}
.box:nth-child(8) {
	left: 75%;
	animation-delay: 3s;
}
.box:nth-child(9) {
	left: 5%;
	animation-delay: 9s;
}
@keyframes animate {
	0% {
		bottom: -100px;
		transform: translateX(0);
	}
	50% {
		transform: translateX(150px);
	}
	100% {
		bottom: 1000px;
		transform: translateX(-200px);
	}
}

This clean, interactive, and incredibly lightweight background animation snippet is a perfect example of what's possible with modern CSS. You can use this fun visual in your projects without compromising on performance. This type of background animation is ideal for creating a personal portfolio or a creative hero section of a project. To get more of this type, click the Load More button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated Bubbles background using CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Bubbles Background using CSS

Video Tutorial:

Animated Bubbles background using CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form