Bubble Animated Background CSS

If you have a website that is static and just works, that’s not enough for our digital landscape. Since engagement is the key to making your website more appealing to your target customers, you need to create a memorable experience for them to stay. You need to engage your visitors on a visual level. And this is where CSS animation and background animation come in handy. Our CSS animation snippet today is about an animated bubble background. With the video tutorial below, you will understand how to create a CSS background animation snippet using only HTML and CSS without the help of JavaScript.

Video Tutorial:

Hope you watched the video tutorial above. You might know that CSS animation is a web design technique that allows the style of a website element to change from one state to another over a period of time or to make a loop animation. CSS animation is very effective because it provides improved user engagement, improved user guidance, visual feedback, performance and efficiency, brand personality. You can use background animation to transform your website into a dynamic, engaging, and memorable journey for your users. It will transform your website from a static website to a modern, effective, and successful one.

You May Also Like:

Bubble Animated Background CSS [ Source Code ]:

To create this Bubble Animated Background using HTML and CSS, you have to create an HTML file and a CSS file. After that, copy the code from the code box below and paste it into your file. After saving the code, open it in your browser. You can also download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->	
<head>
    <meta charset="UTF-8">
    <title>Background animation 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="wrapper"> 
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
</div>
<div class="banner">
	<div class="content">
		<h2>Animated <br><b>Background</b></h2>
	</div>
</div>
</body>
</html>

ADD CSS:

body {
	background: #000; 
	height: 100vh;
}
.wrapper span {
	position: fixed;
	bottom: -50px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background-color: deepskyblue;
    box-shadow: 0 0 20px 5px #fff;
	animation: ani1 10s linear infinite, ani2 1.5s ease-in-out infinite alternate;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.wrapper span:nth-child(1) {
	left: 0;
	animation-delay: 0.6s;
}
.wrapper span:nth-child(2) {
	left: 10%;
	animation-delay: 3s;
	background: red;
}
.wrapper span:nth-child(3) {
	left: 20%;
	animation-delay: 2s;
}
.wrapper span:nth-child(4) {
	left: 30%;
	animation-delay: 5s;
	background: yellow;
}
.wrapper span:nth-child(5) {
	left: 40%;
	animation-delay: 1s;
}
.wrapper span:nth-child(6) {
	left: 50%;
	animation-delay: 7s;
	background: pink;
}
.wrapper span:nth-child(7) {
	left: 60%;
	animation-delay: 6s;
}
.wrapper span:nth-child(8) {
	left: 70%;
	animation-delay: 8s;
	background: red;
}
.wrapper span:nth-child(9) {
	left: 80%;
	animation-delay: 6s;
}
.wrapper span:nth-child(10) {
	left: 90%;
	animation-delay: 4s;
	background: yellow;
}
.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.content h2 {
	-webkit-text-fill-color: white;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: white;
	font-family: "Montserrat", sans-serif;
	font-size: 80px;
	text-align: center;
	line-height: .9;
}
.content h2 b {
	-webkit-text-fill-color: transparent;
	font-size: 65px;
}
@keyframes ani1 {
	0% {
		bottom: 0;
		margin-left: 90px;
		margin-right: 0;
	}
	20% {
		bottom: 20%;
		margin-left: 0;
		margin-right: 90px;
	}
	40% {
		bottom: 40%;
		margin-left: 90px;
		margin-right: 0;
	}
	60% {
		bottom: 60%;
		margin-left: 0;
		margin-right: 90px;
	}
	80% {
		bottom: 80%;
		margin-left: 90px;
		margin-right: 0;
	}
	100% {
		bottom: 100%;
		margin-left: 0;
		margin-right: 90px;
	}
}

@keyframes ani2 {
    from {
      box-shadow: 0 0 20px 5px #fff; 
    }
    to {
      box-shadow: 0 0 40px 10px #00fafa; 
    }
  }

We all know that visual elements like background animations are the most valuable for holding a user's attention for a long time, and they are not just important - they are essential. We hope you learned something new today. For more code on this topic, you should go to the homepage of this website and click on the Load More button. Thanks for watching.

DOWNLOAD CODE

Video Tutorial:

Bubble Animated Background CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bubble Animated Background CSS

Video Tutorial:

Bubble Animated Background CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form