Pure CSS Animated Background

Animation is an effective way to communicate information. The background animation can be used to create a transition between the different states of a website. When your visitors explore your website they'll get an experience that will make them want to buy something, or maybe even check out. In this post, we are going to share a CSS background animation loop source code that was created by CSS Tricks. You can use this CSS background animation code for your next project. If you want to get the source code, you should watch the video below. You will be able to implement the code in your project with this tutorial. Front-end development videos are published on our channel frequently. If you would like to learn more about front-end development, you can subscribe to our YouTube channel.

I hope you've seen the video tutorial above and understood the basic coding behind this CSS background animation example. There are several reasons why you should add background animation to your website. In the first place, it's useful to create an immersive experience for your users. Animating the background of your page is a quick and easy way to make your content more interesting to read and view.

This is the project the banner text was put in a div named 'content'. We have created a new div called 'box' where we have taken an unordered list with six elements. If you desire, you can take more than that. At the beginning of CSS, we removed the default margin and padding of the project. After we’ve given a gradient background to our project. You can use any background color that works for you. The banner text (h1) has been styled and brought to the middle of the project. I've created a couple of background animation projects before. I am creating an animation where stars will appear from the bottom, grow bigger in size, and disappear after being on top. In this step, I have created the stars using CSS Pseudo-Elements. Watch the video tutorial to see how we've created the star shape for this project. After that, we have positioned the star elements in the different places of the project. With CSS3, we can animate multiple things at once and control how long a specific animation performs. We have used different animation-delay values for each li element. We ended up using the CSS keyframes animation property to get the required result.

You May Also like:

Pure CSS Animated Background [ Source Code ]:

You need to create two files in order to create this project. There are two files, one of which has a .html extension and the other has a .css extension. After you have created the external CSS, you have to link it to the HTML file. After that, copy the code from the code box and paste it into your project. The source code can be downloaded from the download button if you have any problems with the code below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Pure CSS Animated Background</title>
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="content">
        <h1>animated background</h1>
    </div>
    
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0px;
	padding: 0px;
}
body {
	overflow: hidden;
}
.content {
	background: linear-gradient(to bottom, #ff512f, #dd2476);
	height: 100vh;
}
.content h1 {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: sans-serif;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 80px;
	text-align: center;
	text-transform:uppercase;
}
.box ul li {
	position: relative;
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.9em;
	margin-right: 0.9em;
	margin-bottom: 1.2em;
	border-right: 0.3em solid transparent;
	border-bottom: 0.7em solid white;
	border-left: 0.3em solid transparent;
	list-style: none;
	opacity: 0;
	bottom: 0;
	left: 10vw;
	animation: animate 15s linear infinite;
}
.box ul li:before, .box ul li:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0.6em;
	left: -1em;
	border-right: 1em solid transparent;
	border-bottom: 0.7em solid white;
	border-left: 1em solid transparent;
	transform: rotate(-35deg);
}
.box ul li:after {
	transform: rotate(35deg);
}
.box ul li:nth-child(2) {
	left: 36vw;
	animation-delay: 2s;
}
.box ul li:nth-child(3) {
	left: 22vw;
	animation-delay: 4s;
}
.box ul li:nth-child(4) {
	left: 56vw;
	animation-delay: 6s;
}
.box ul li:nth-child(5) {
	left: 76vw;
	animation-delay: 4s;
}
.box ul li:nth-child(6) {
	left: 80vw;
	animation-delay: 8s;
}
@keyframes animate {
	0% {
		transform: scale(0) rotate(0);
		opacity: 1;
		bottom: 0;
	}
	100% {
		transform: scale(5) rotate(360deg);
		opacity: 0;
		bottom: 100vh;
	}
}

I hope you have successfully implemented the HTML CSS background animation code. There are different topics of front-end development that we share source code on. If you want to get the code, please visit our website more frequently. Please help others to learn by sharing the articles of this blog with other like-minded people. I would like to thank you for your visit.

DOWNLOAD CODE

Pure CSS Animated Background [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Pure CSS Animated Background

Pure CSS Animated Background [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form