Pure CSS Animated Background

In this Blog, we are going to learn how to create Animated Background using CSS and HTML.
First of all, create an HTML File and paste the below code.
HTML CODE:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">

</head>

<body>
<div class="context">
<h1>Animated Background Using CSS</h1>
</div>

<div class="area" >
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div >
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Animated Background Using CSS</h1>

</div>

</ul>

</div >

</body>

</html>

Now create a CSS file and paste the below code.

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
margin: 0px;
padding: 0px;
}

body{
font-family: 'Exo', sans-serif;
}


.context {
width: 100%;
position: absolute;
top:50vh;

}
.context h1{
text-align: center;
color: #fff;
font-size: 50px;
}
.area{
background: #4e54c8; 
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8); 
width: 100%;
height:100vh;
}

.circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}

.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}


.circles li:nth-child(2){
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}

.circles li:nth-child(3){
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}

.circles li:nth-child(4){
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}

.circles li:nth-child(5){
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}

.circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}

.circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}

.circles li:nth-child(8){
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}

.circles li:nth-child(9){
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}

.circles li:nth-child(10){
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}

@keyframes animate {

0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}

100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

margin: 0px;

padding: 0px;

}

body{

font-family: 'Exo', sans-serif;

}

.context {

width: 100%;

position: absolute;

top:50vh;

}

.context h1{

text-align: center;

color: #fff;

font-size: 50px;

}

.area{

background: #4e54c8;

background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);

width: 100%;

height:100vh;

}

.circles{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

.circles li{

position: absolute;

display: block;

list-style: none;

width: 20px;

height: 20px;

background: rgba(255, 255, 255, 0.2);

animation: animate 25s linear infinite;

bottom: -150px;

}

.circles li:nth-child(1){

left: 25%;

width: 80px;

height: 80px;

animation-delay: 0s;

}

.circles li:nth-child(2){

left: 10%;

width: 20px;

height: 20px;

animation-delay: 2s;

animation-duration: 12s;

}

.circles li:nth-child(3){

left: 70%;

width: 20px;

height: 20px;

animation-delay: 4s;

}

.circles li:nth-child(4){

left: 40%;

width: 60px;

height: 60px;

animation-delay: 0s;

animation-duration: 18s;

}

.circles li:nth-child(5){

left: 65%;

width: 20px;

height: 20px;

animation-delay: 0s;

}

.circles li:nth-child(6){

left: 75%;

width: 110px;

height: 110px;

animation-delay: 3s;

}

.circles li:nth-child(7){

left: 35%;

width: 150px;

height: 150px;

animation-delay: 7s;

}

.circles li:nth-child(8){

left: 50%;

width: 25px;

height: 25px;

animation-delay: 15s;

animation-duration: 45s;

}

.circles li:nth-child(9){

left: 20%;

width: 15px;

height: 15px;

animation-delay: 2s;

animation-duration: 35s;

}

.circles li:nth-child(10){

left: 85%;

width: 150px;

height: 150px;

animation-delay: 0s;

animation-duration: 11s;

}

@keyframes animate {

0%{

transform: translateY(0) rotate(0deg);

opacity: 1;

border-radius: 0;

}

100%{

transform: translateY(-1000px) rotate(720deg);

opacity: 0;

border-radius: 50%;

}

Output:

Download Source Code

Demo

Pure CSS Animated Background

Like this:

No Comment.

Share this:

Like this:

No Comment.