CSS only Animated Background

Hello Friends, In this blog, we are going to learn how to create a CSS-only animated background for the header section of a website. Animated backgrounds give your website a different look. Animation helps improve the aesthetics of a website. Today we will share one such background animation snippet with you. Before collecting the source code directly, watch the below video tutorial at least once. It will be very helpful to understand the code after downloading it. We have many videos on front-end development on our YouTube channel. If you like the videos then subscribe to our channel.

Hope you have watched the video and understand how this snippet is made. Animated background for websites is common nowadays. Out of the general website design trend, nowadays many developers are designing websites in a slightly different way. This has become the demand of this time. Because the more unique a website is, the more acceptable and appreciated it will be to users. As animation adds a different dimension to a website, this is a trend that every developer wants to use. A lot of beautiful animations can be created with JQuery and JavaScript. But we made this background animation using CSS keyframes animation only. The snippet uses very basic HTML and CSS code which you can easily understand by watching the video above.

Instead of creating a plain background animation effect, we designed a website homepage and applied this animation behind it. First, we took what it takes to create a homepage. Like navigation menu, banner text, etc. Then we created a ul element called box-area with six li elements spread all over the homepage using CSS position absolute property. They are then each given a different animation duration and animation-delay value so that they can be animated separately rather than together. Next, we created our desired animation using the CSS keyframes animation property. This project is not made responsive because this snippet is intended for background animation.

You May Also Like:

CSS only Animated Background [ Source Code ]:

To build this project, first, we need to create two files. One of them is the HTML file and the other is the CSS file. After creating the CSS file, link it to the HTML file. Copy the code from the code box below and paste it into your file and save it. Open the snippet in your browser and see if it works. If yes then ok and if not then download the code from the below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>animated background with pure css and html</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner-text">
        <ul>
            <li><a href="#">Home</a></li>            
            <li><a href="#">About</a></li>            
            <li><a href="#">Portfolio</a></li>            
            <li><a href="#">Services</a></li>            
            <li><a href="#">Contact</a></li>            
        </ul>
        
        <h2>Animated Background</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, eveniet, explicabo cumque incidunt saepe praesentium?</p>
    </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: montserrat;
}
.banner-text {
	width: 100%;
	position: absolute;
	z-index: 1;
}
.banner-text ul {
	height: 50px;
	display: flex;
	justify-content: center;
}
.banner-text ul li {
	display: inline-block;
	padding: 40px 15px;
}
.banner-text ul li a {
	text-decoration: none;
	color: #fff;
	text-transform: capitalize;
	font-size: 30px;
	padding: 5px 10px;
	font-family: berkshire swash;
}
.banner-text ul li a:hover {
	background: #fff;
	color: #000;
}
.banner-text h2 {
	text-align: center;
	color: #fff;
	font-size: 50px;
	margin-top: 15%;
	margin-bottom: 15px;
	font-family: berkshire swash;
	letter-spacing: 3px;
}
.banner-text p {
	text-align: center;
	font-size: 18px;
	width: 35%;
	margin: auto;
	color: #ddd;
	line-height: 1.7;
}
.animation-area {
	background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
	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: 0;
	height: 0;
	border-bottom: 160px solid rgba(255, 255, 255, 0.2);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	animation: animate 20s linear infinite;
	bottom: -150px;
}
.box-area li:nth-child(1) {
	left: 86%;
	animation-delay: 0s;
}
.box-area li:nth-child(2) {
	left: 12%;
	animation-delay: 1.5s;
	animation-duration: 10s;
}
.box-area li:nth-child(3) {
	left: 70%;
	animation-delay: 5.5s;
}
.box-area li:nth-child(4) {
	left: 42%;
	animation-delay: 0s;
	animation-duration: 15s;
}
.box-area li:nth-child(5) {
	left: 65%;
	animation-delay: 0s;
}
.box-area li:nth-child(6) {
	left: 23%;
	animation-delay: 3.5s;
}
@keyframes animate {
	0% {
		transform: translateY(0) scale(0);
	}
	100% {
		transform: translateY(-800px) scale(2);
		opacity: 0;
	}
}

Hope you were able to implement the code correctly. If you want to get more such front-end development-related source code, please visit our website regularly. We have many more snippets on this website. If you want to get it, click the Load More button below the homepage. Sharing is caring, so please share our website articles with like-minded people so that they also benefit from them. We want to thank you very much for visiting our website.

DOWNLOAD CODE

CSS only Animated Background [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS only Animated Background

CSS only Animated Background [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form