This HTML5 & CSS code snippet helps you to create an animated background for your website. It is based on a simple idea to animate the div elements with a rounded boxed style with a gradient background. The div elements are arranged in a wrapper with an absolute position and animated through the CSS keyframe property. You can use this animated background for the hero section or for the whole body of your website.
How to Create Animated Website Background with HTML5
In the first step, create a div element with a class name “box” and place as many divs element as you want animated boxes. Wrap all the elements into a parent div and define its class name “wrapper”. The following is the complete HTML structure for the animated background:
<body>
<div class="wrapper">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
Now, define the CSS styles for the wrapper, and set its absolute position along with 100% of width and height. Similarly, define the background using the linear gradient property. You can explore CSS linear gradient colors from here.
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #24C6DC;
background: -webkit-linear-gradient(to bottom, #514A9D, #24C6DC);
background: linear-gradient(to bottom, #514A9D, #24C6DC);
}
.box div {
position: absolute;
width: 60px;
height: 60px;
background-color: transparent;
border: 6px solid rgba(255,255,255,0.8);
}
.box div:nth-child(1) {
top: 12%;
left: 42%;
animation: animate 10s linear infinite;
}
.box div:nth-child(2) {
top: 70%;
left: 50%;
animation: animate 7s linear infinite;
}
.box div:nth-child(3) {
top: 17%;
left: 6%;
animation: animate 9s linear infinite;
}
.box div:nth-child(4) {
top: 20%;
left: 60%;
animation: animate 10s linear infinite;
}
.box div:nth-child(5) {
top: 67%;
left: 10%;
animation: animate 6s linear infinite;
}
.box div:nth-child(6) {
top: 80%;
left: 70%;
animation: animate 12s linear infinite;
}
.box div:nth-child(7) {
top: 60%;
left: 80%;
animation: animate 15s linear infinite;
}
.box div:nth-child(8) {
top: 32%;
left: 25%;
animation: animate 16s linear infinite;
}
.box div:nth-child(9) {
top: 90%;
left: 25%;
animation: animate 9s linear infinite;
}
.box div:nth-child(10) {
top: 20%;
left: 80%;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: scale(0) translateY(-90px) rotate(360deg);
opacity: 1;
}
100% {
transform: scale(1.3) translateY(-90px) rotate(-180deg);
border-radius: 50%;
opacity: 0;
}
}
That’s all! hopefully, you have successfully applied this CSS animated background to your website project. If you have any questions or suggestions, feel free to comment below.
