Animated background using HTML5 CSS3

Animated background is a type of visual effect that we see as the background of a website or app. This animation can be moving images, graphics, or patterns. These background animations are usually implemented by CSS animations, HTML5 canvas, SVG animations, or even video backgrounds. The subject of our CSS animation example today is animated backgrounds. This CSS animation background snippet shows how some animated bubbles fall from the top like a rain stream and fade out before falling down. The video tutorial below shows how to create this snippet. Before collecting the source code, watch the entire video once.

Video Tutorial:

We Hope you have watched the full video tutorial with the animated background. An animated background for a website is very useful as it enhances the visual appeal of that website. Also, it plays an effective role in increasing user engagement and creating an immersive user experience. There is no better option than an animated background to draw attention to a specific section of a webpage and create a memorable experience.

CSS animations have become an integral part of modern web development. Because it is smoother and more efficient, easy to use, compatible with different browsers, etc. Learning CSS animations for new developers is easier and less intimidating than jumping into JavaScript-based animations which are complex in nature. Many beautiful animations can be created using only CSS animations, animated backgrounds being one of them.

In our animated background snippet today, fourteen child divs named 'round' are wrapped inside a 'wrapper' parent div. Each of them is given a width and height and then a glow effect. After that, two animations are set. The first is the bubble falling animation and the second is the scaling animation. Both of these animations are implemented using CSS keyframe animations.

You May Aldo like:

Animated background using HTML5 CSS3 [ Source Code ]:

To create this Animated background using HTML5 and CSS3, you need to create an HTML and a CSS file. after that, Copy the code from the code box below and paste it into your file. If there is any problem you can download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->     
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Background HTML CSSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
        <div class="round"></div>
    </div>

    <div class="text-area">
        <h2>animated <br>Background</h2>
    </div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	overflow: hidden;
	background-color: #091a22;
}
.text-area {
	display: grid;
	place-items: center;
	height: 100vh;
	text-align: center;
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	font-size: 50px;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px #fff;
}
.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.round {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #01b4f9;
	border: 5px solid #01b4f9;
	opacity: 0;
	box-shadow: 0 0 100px #01b4f9, 0 0 10px #01b4f9, 0 0 20px #01b4f9;
	animation: animate 4s linear infinite, ani-2 2s linear infinite;
}
.round:nth-child(1) {
	left: 5%;
	animation-delay: 0.5s;
}
.round:nth-child(2) {
	left: 65%;
	animation-delay: 1s;
}
.round:nth-child(3) {
	left: 90%;
	animation-delay: 1.5s;
}
.round:nth-child(4) {
	left: 18%;
	animation-delay: 2s;
}
.round:nth-child(5) {
	left: 93%;
	animation-delay: 2.5s;
}
.round:nth-child(6) {
	left: 52%;
	animation-delay: 3s;
}
.round:nth-child(7) {
	left: 65%;
	animation-delay: 3.5s;
}
.round:nth-child(8) {
	left: 35%;
	animation-delay: 4s;
}
.round:nth-child(9) {
	left: 85%;
	animation-delay: 4.5s;
}
.round:nth-child(10) {
	left: 45%;
	animation-delay: 5s;
}
.round:nth-child(11) {
	left: 36%;
	animation-delay: 5.5s;
}
.round:nth-child(12) {
	left: 72%;
	animation-delay: 6s;
}
.round:nth-child(13) {
	left: 14%;
	animation-delay: 6.5s;
}
.round:nth-child(14) {
	left: 70%;
	animation-delay: 7s;
}
@keyframes animate {
	0% {
		top: 0;
		opacity: 1;
	}
	20% {
		top: 20%;
		opacity: 0.8;
	}
	40% {
		top: 40%;
		opacity: 0.6;
	}
	60% {
		top: 60%;
		opacity: 0.4;
	}
	80% {
		top: 80%;
		opacity: 0.2;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}
@keyframes ani-2 {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(2.5);
	}
}

Animated backgrounds are not only useful for user engagement but also play an important role in aesthetic appeal and brand identity. CSS animations play an important role in creating visually appealing and responsive animations without the complexity of JavaScript. We hope you liked today's snippet. If you want more snippets like this, click the load more button on our homepage and scroll down the website. Please share this blog post with others and help us grow. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated background using HTML5 CSS3 [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated background using HTML5 CSS3

Video Tutorial:

Animated background using HTML5 CSS3 [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form