CSS Animated Background Example

Hello and Welcome to the Blog. Today's tutorial is about how we can create an animated background using only HTML and CSS. In this CSS animation example, we will see some bubbles going from bottom to top. Earlier I have shared many snippets in this blog. Please make sure to check those apart from this project. I will suggest you follow the below video tutorial and then come here to get the source code.

I hope you have watched the video tutorial and got some ideas. In the HTML part, I took ten span tags and took a random text inside a div. In CSS, I put the text in the center of the viewport. I then set a specific position value for all spans of the container and set an animation value. I give each span a different animation-delay and left value so that they animate one after the other. I gave them different heights and widths so that the animation looks like a bubble animation. Please follow the video tutorial as it is not possible to explain everything in words.

You May Also Like:

CSS Animated background [ Source Code ]:

To create the project, create an HTML file with the .html extension and a CSS file with the .css extension. Add external CSS files like video tutorials. Now copy the code below and paste and save it to your files.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Background Animation using only html and css</title>
	<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<h2>Animated Background</h2>
        <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
	</div>
</body>
</html>

ADD CSS:

.container {
	display: grid;
	place-items: center;
	min-height: 100vh;
}
.container h2 {
	font-family: 'Cookie', cursive;
	font-size: 80px;
}
.container span {
	position: fixed;
	bottom: -50px;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: linear-gradient(-135deg, green, white);
	animation: animate 10s linear infinite;
}
.container span:nth-child(1) {
	left: 0;
	animation-delay: .6s;
	height: 50px;
	width: 50px;
}
.container span:nth-child(2) {
	left: 10%;
	animation-delay: 3s;
	height: 60px;
	width: 60px;
}
.container span:nth-child(3) {
	left: 20%;
	animation-delay: 2s;
	height: 80px;
	width: 80px;
}
.container span:nth-child(4) {
	left: 30%;
	animation-delay: 5s;
}
.container span:nth-child(5) {
	left: 40%;
	animation-delay: 1s;
}
.container span:nth-child(6) {
	left: 50%;
	animation-delay: 7s;
	height: 90px;
	width: 90px;
}
.container span:nth-child(7) {
	left: 60%;
	animation-delay: 6s;
	height: 120px;
	width: 120px;
}
.container span:nth-child(8) {
	left: 70%;
	animation-delay: 8s;
}
.container span:nth-child(9) {
	left: 80%;
	animation-delay: 6s;
	height: 50px;
	width: 50px;
}
.container span:nth-child(10) {
	left: 90%;
	animation-delay: 4s;
}
@keyframes animate {
	0% {
		bottom: 0%;
		margin-left: 90px;
		margin-right: 0px;
	}
	20% {
		bottom: 20%;
		margin-left: 0px;
		margin-right: 90px;
	}
	40% {
		bottom: 40%;
		margin-left: 90px;
		margin-right: 0px;
	}
	60% {
		bottom: 60%;
		margin-left: 0px;
		margin-right: 90px;
	}
	80% {
		bottom: 80%;
		margin-left: 90px;
		margin-right: 0px;
	}
	100% {
		bottom: 100%;
		margin-left: 0px;
		margin-right: 90px;
	}
}

I hope you have successfully applied the code. If you find this useful, subscribe to my YouTube channel. Also please click the bell icon so that you don't miss upcoming videos. I always try to give video tutorials on various topics of front-end development. If you want, you can share the articles of this blog with like-minded people to spread knowledge. If you are facing any problems, then download the code from the button provided below. Thank you so much for your time.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

CSS Animated Background Example

You might like

Post a Comment

Post a Comment

Contact Form