Animated Background with Pure CSS and Html

Today in this blog, I will share a snippet on creating an animated background with pure CSS and HTML. No JavaScript or jQuery was used in this project while creating the snippet.

CSS animation is often used to animate elements like width, height, color, etc. it helps create an excellent website design that grabs visitors' attention. We can design lots of magnificent animation with the css3. This project is one of the examples of that. This project makes a simple-looking homepage with a navbar and a background animation where some boxes will appear from the bottom. These boxes will go up with rotating animation, and at one stage, they will disappear.

Let's starts with the HTML markup. The HTML markup is straightforward. First, I have taken a div named 'banner-text' and placed an unordered list of five nav items. I have taken an h2 tag with some random text and as a banner text. Later I have taken another div named 'animation-area' where I placed another unordered list called 'box-area.' inside, I have taken six li elements, which I will use to make the box animation. To understand better, I will recommend you to follow the video tutorial below.

Video Tutorial:

I hope you watched the entire video. Now, let's start with the CSS. First, I omitted the default margin padding by providing the universal selector a margin and zero paddings. I have used Baloo google free font for this project. You can use yours from the google fonts. Then I have styled the navbar with basic CSS styling make it over to the top-right corner of the project. Then I have given the 'animation-area' div a nice gradient-color and width and height, which occupied the entire viewport height and width of the webpage. Later styled to h2 banner text to make the center of the webpage.

Now comes to the styling of box animation. First, I gave 'box-area' ul an absolute position value. Later, it gave it a width and height of 100% and an 'overflow: hidden' value so that project does not overflow the project's viewport. Then I have given the li element width and height of 25px. After that, I set an animation named 'animate' with an animation duration-duration of the 20s. I have given each li element a separate left, width, height, and animation-delay value. I then set CSS keyframes animation for the animate class with transform translate and rotate value.

Animated Background with Pure CSS and HTML (Source code):

first, create an HTML and CSS file. Later link the CSS file to your HTML file. Copy the files below and paste them into the individual files.

ADD HTML

<!DOCTYPE html>
<!--Code by Divinector - divinectorweb.com-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animated background with pure css and html</title>
	<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="banner-text">
		<ul>
			<li>Home</li>
			<li>About</li>
			<li>Portfolio</li>
			<li>Services</li>
			<li>Contact</li>
		</ul>
		<h2>Welcome to our Website</h2>
	</div>
	<div class="animation-area">
		<ul class="box-area">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Baloo 2', cursive;
}
.banner-text {
	width: 100%;
	position: absolute;
	z-index: 1;
}
.banner-text ul {
	height: 50px;
	float: right;
}
.banner-text ul li {
	display: inline-block;
	padding: 40px 15px;
	text-transform: uppercase;
	color: #fff;
	font-size: 20px;
}
.banner-text ul li:hover {
	cursor: pointer;
}
.banner-text h2 {
	text-align: center;
	color: #fff;
	font-size: 50px;
	margin-top: 20%;
}
.animation-area {
	background: linear-gradient(to left, #8942a8, #ba382f);
	width: 100%;
	height: 100vh;
}
.box-area {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.box-area li {
	position: absolute;
	display: block;
	list-style: none;
	width: 25px;
	height: 25px;
	background: rgba(255, 255, 255, 0.2);
	animation: animate 20s linear infinite;
	bottom: -150px;
}
.box-area li:nth-child(1) {
	left: 86%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}
.box-area li:nth-child(2) {
	left: 12%;
	width: 30px;
	height: 30px;
	animation-delay: 1.5s;
	animation-duration: 10s;
}
.box-area li:nth-child(3) {
	left: 70%;
	width: 100px;
	height: 100px;
	animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
	left: 42%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 15s;
}
.box-area li:nth-child(5) {
	left: 65%;
	width: 40px;
	height: 40px;
	animation-delay: 0s;
}
.box-area li:nth-child(6) {
	left: 15%;
	width: 110px;
	height: 110px;
	animation-delay: 3.5s;
}
@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}

I hope you like this simple and yet exciting project. Please subscribe to my youtube channel and follow my social media profiles to stay connected with this blog. Thank you for visiting, and keep coming for more interesting snippets.

Video Tutorial:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Background with Pure CSS and Html

Video Tutorial:

You might like

Post a Comment

Post a Comment

Contact Form