Animated Background HTML CSS

byCodingFlicks -October 20, 2020

0

Hello friends, Today, I will share another simple yet interesting snippet based on creating an animated background using CSS. No javascript or jquery codes were used to create this snippet—only plain HTML and CSS during this project's creation. I have shared lots of CSS animation based snippet before. Check those snippets out if you are interested.

Animation in CSS is used to animate to CSS properties like background-color, height, width, color, etc. Before, many developers used javascript or jquery to create animation when they make a website. But nowadays, css3 opens the door to develop awesome animation without the help of javascript. We can this project as an example because no javascript or jquery was used for this magnificent project.

The HTML markup of this project is pretty easy and straightforward. I have taken a div named 'homepage' and placed an unordered list to create a simple looking navigation menu. I also took an h2 tag with a random text. This text will be used to create a banner text for the project. Later I have taken another div box called 'boxes' and placed another unordered list named 'single-box' with seven li elements. That's all for the HTML markup.

You may also like:

I am moving to the CSS code. We clean up the default margin padding by setting them both to 0. I used 'lato' as the primary font for the project, but you can use whatever font you want from google fonts. Then I did some basic styling for the 'homepage' div element to create a basic navbar and make the homepage's banner text absolute middle. Later I have provided a gradient color to the 'boxes' div element and given a 100% width and 100vh height to cover the entire homepage of the project. After that, I provided all the absolute position value and set an animation for all li elements. Later I provide every single li element an individual height, width, left, and animation-delay value. Now CSS keyframes are where the magic occurs. We need CSS keyframes animation to rotate the boxes we created and positioned. I have added transform translateY(0) and rotate(0deg) at 0% and translateY(-800px) rotate(360deg) at 100%. I also set the opacity to one for 0% and zero for 100%. Styling of this kind will results in a nice box animation from the bottom of the homepage with a transition. The boxes will slowly appear from the bottom, but they will disappear one by one when they go on top.

To create this snippet, make one HTML and CSS file. After that, link the stylesheet to the HTML file. Later, copy the code below and paste them into a separate file. Save and run the project in your browser. Play around with the code by changing the background color, font size, box sizes, and the other elements used here.

HTML

<!DOCTYPE html>
<!--code by codingflicks.com-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Background HTML CSS | No javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="homepage">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
        
        <h2>Awesome animation</h2>
    </div>
    
    <div class="boxes">
        <ul class="single-box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: lato;
}
.homepage {
	width: 100%;
	position: absolute;
	z-index: 1000;
}
.homepage ul {
	height: 50px;
	float: right;
	margin-right: 50px;
}
.homepage ul li {
	display: inline-block;
	padding: 40px 15px;
	text-transform: uppercase;
	color: #fff;
	font-size: 25px;
	cursor: pointer;
	font-weight: 900;
}
.homepage h2 {
	text-align: center;
	color: #fff;
	font-size: 65px;
	margin-top: 20%;
	text-transform: uppercase;
	font-weight: 900;
}
.boxes {
	background: linear-gradient(to top, #2c3e50 0%, #fd746c 100%);
	width: 100%;
	height: 100vh;
}
.single-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.single-box 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;
}
.single-box li:nth-child(1) {
	left: 86%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
}
.single-box li:nth-child(2) {
	left: 12%;
	width: 30px;
	height: 30px;
	animation-delay: 1.5s;
	animation-duration: 10s;
}
.single-box li:nth-child(3) {
	left: 29%;
	width: 100px;
	height: 100px;
	animation-delay: 5.5s;
}
.single-box li:nth-child(4) {
	left: 42%;
	width: 150px;
	height: 150px;
	animation-delay: 0s;
	animation-duration: 15s;
}
.single-box li:nth-child(5) {
	left: 65%;
	width: 40px;
	height: 40px;
	animation-delay: 0s;
}
.single-box li:nth-child(6) {
	left: 15%;
	width: 110px;
	height: 110px;
	animation-delay: 3.5s;
}
.single-box li:nth-child(7) {
	left: 75%;
	width: 200px;
	height: 200px;
	animation-delay: 4.5s;
	bottom: -250px;
}
@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}

I hope you liked this nice and simple snippet. Please follow our social media profiles to stay connected with this blog. Thanks for visiting the blog and visiting for more exciting HTML, CSS, jquery, javascript, and other front-end development-related snippets.

Please do not enter any spam link in the comment box.