Animated Background using Pure CSS

Animation makes any website more attractive to visitors. Here we have used only HTML and CSS to create animated effects on the webpage background. You can use this type of animation on the homepage of any website. The video tutorial below shows the step-by-step process of creating this snippet. If you find the content of our YouTube channel educational and useful then please subscribe to our channel.

Video Tutorial:

Hope you have watched the video tutorial. Adding some animation to your website will help it stand out from other competitor websites. An interesting way to do this is to use CSS background animation. With this kind of background animation, developers can add visual interest to any website content. This type of animation plays a very useful role in drawing attention to certain page elements.

In our today's snippet, we have created some square elements of different sizes. Then we spread them across the viewport using fixed position and left values. Each element is assigned a separate animation-delay value so that they animate one after the other instead of animating all at once. Keeping the aesthetic in mind, the square shapes have been given a glowing effect that looks good on the black background. Then each span or square element is given a common animation value. After that, we used keyframes to define the animation sequence and then apply the animation to the square element so that they appear from the bottom and fade away while going up.

You May Also Like:

Animated Background using Pure CSS [ Source Code ]:

First, create HTML and CSS files and link the CSS file with the HTML file. Then copy the code from the code box below and paste it into your project. Save the code and open it in your browser to see if the code is working properly. If it doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Background using HTML and CSS | No Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&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><b>Animation</b></h2>
	</div>
</div>

</body>
</html>

ADD CSS:

body {
	background: #111;
	height: 100vh;
}
.wrapper span {
	position: fixed;
	bottom: -180px;
	height: 50px;
	width: 50px;
	z-index: -1;
	background-color: #18191f;
	box-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff, 0 0 200px #0072ff;
	animation: animate 10s linear infinite;
}
.wrapper span:nth-child(1) {
	left: 60px;
	animation-delay: 0.6s;
}
.wrapper span:nth-child(2) {
	left: 10%;
	animation-delay: 3s;
	width: 60px;
	height: 60px;
}
.wrapper span:nth-child(3) {
	left: 20%;
	animation-delay: 2s;
}
.wrapper span:nth-child(4) {
	left: 30%;
	animation-delay: 5s;
	width: 80px;
	height: 80px;
}
.wrapper span:nth-child(5) {
	left: 40%;
	animation-delay: 1s;
}
.wrapper span:nth-child(6) {
	left: 50%;
	animation-delay: 7s;
}
.wrapper span:nth-child(7) {
	left: 60%;
	animation-delay: 6s;
	width: 100px;
	height: 100px;
}
.wrapper span:nth-child(8) {
	left: 70%;
	animation-delay: 8s;
}
.wrapper span:nth-child(9) {
	left: 80%;
	animation-delay: 6s;
	width: 90px;
	height: 90px;
}
.wrapper span:nth-child(10) {
	left: 90%;
	animation-delay: 4s;
}
.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.content h2 b {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: #fff;
	font-family: montserrat;
	font-size: 80px;
	text-transform: uppercase;
	letter-spacing: 12px;
}
@keyframes animate {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translateY(-800px) rotate(360deg);
		opacity: 0;
	}
}

Hope the code is working properly. There are many more snippets on our website that you may find useful. To get them, go to the homepage of our website and click on the Load More button below. Keep scrolling down to find the snippet you want. If you find the content of our website helpful, please share it with others. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated Background using Pure CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Background using Pure CSS

Video Tutorial:

Animated Background using Pure CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form