CSS Bubble Background Animation

CSS animation is very simple, but it is very effective for bringing different elements of any website to life. This technique allows you to easily create interesting animations such as moving, resizing, fading, or rotating without complex JavaScript code or other additional libraries. Despite its limitations compared to JavaScript animation, any type of website can be made interactive and user-friendly with CSS animation. We all know that the first impression of a website is its homepage. If an attractive background animation can be added to this homepage, it will play a huge role in attracting the attention of visitors. Today, we will share with you an animated bubble background animation snippet made using only HTML and CSS. Below is a video tutorial on how to create this cool CSS animation effect snippet. You can watch it if you want.

Video Tutorial:

We hope you enjoyed the video tutorial on CSS background animation above. CSS animations don't offer the complex sequencing or interactivity of JavaScript, but their simplicity is their greatest strength. The animations created with them run natively in the browser and work smoothly. Since the animations are lightweight, they won't slow down your site and will create attractive visuals with minimal effort. CSS animations are very useful for a website because the animations created within them guide users, make navigation more intuitive, and make interactions more engaging.

Today's snippet is basically an animated bubble background effect. Here, the elements of the 'box' div move up from the bottom like a bubble and gradually disappear. The blue gradient background behind it makes the whole effect more attractive. Here, the text called 'animation' has been given a gradient overlay to display it stylishly.

You may also like:

CSS Bubble Background Animation [ Source Code ]:

To create this CSS animation snippet, you will first need to create an HTML and then a CSS file, then copy the code from the code box below and paste it into your created file. Check the snippet in your browser, and if you encounter any issues, you can download the code from the download button given 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 rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrapper">
		<div class="box">
		  <div style="width: 40px;height: 40px;">
			<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 style="width: 40px;height: 40px;">
			<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 style="width: 40px;height: 40px;">
			<span class="dot"></span>
		  </div>
		</div>
		<div class="box">
		  <div>
			<span class="dot"></span>
		  </div>
		</div>
	  </div>
	  <div class="banner-text">
		<h2>animation</h2>
	  </div>
</body>
</html>

ADD CSS:

body, html {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	background: linear-gradient(to top, deepskyblue 60%, transparent);
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	top: 0;
	left: 0;
}
.banner-text {
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.banner-text h2 {
	font-family: montserrat;
	text-transform: uppercase;
	font-size: 120px;
	text-align: center;
	margin: 0;
	background-image: linear-gradient(to top, white 2%, transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.box {
	position: absolute;
	bottom: -100px;
	animation: animate 15s infinite ease-in;
}
.box div {
	height: 60px;
	width: 60px;
	border: 4px 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% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}

Although animations made with CSS may seem simple, they are incredibly effective. CSS animations prove how effective they are in enhancing the user experience, adding aesthetic appeal, etc. We hope you have collected today's snippet. To get more such snippets, click on the download button given below the homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

CSS Bubble Background Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Bubble Background Animation

Video Tutorial:

CSS Bubble Background Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form