Pre-requisite:
- Basic html Learn HTML
- css Learn css
- You will need to have a basic knowledge of Keyframes with css Learn Keyframes
In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation.
HTML code: In this section, we will design the basic structure of the body.
<!DOCTYPE html> < html >
< head >
< title >
Create Animated Background
using CSS3
</ title >
</ head >
< body >
< div class = "container" >
< input id = "enter" type = "textbox"
placeholder = "USERNAME" >
< input id = "enter" type = "password"
placeholder = "PASSWORD" >
< button id = "submit" type = "button" >
< span id = "span" >SUBMIT</ span >
</ button >
< br >
< div id = "forget" >
< a href = "" >Create Account</ a >
< a href = "" >Forget Password?</ a >
</ div >
</ div >
</ body >
</ html >
|
CSS code: In this section, we are using some CSS property to design background animation. We are using linear-gradient() method and animation property to design background.
<style> body
{
display :flex;
justify- content : center ;
align-items: center ;
background-image :linear-gradient( 155 deg,
white , violet, blue , lightblue);
background- size : 450% ;
animation:bganimation 15 s infinite;
}
input
{
margin-bottom : 16px ;
outline : none ;
}
.container
{
background-image :radial-gradient(orange, tomato);
height : 300px ;
width : 350px ;
border : black 1.5px solid ;
border-radius: 5% ;
/*box-shadow: 8px 8px 50px black; */
display :flex;
justify- content : center ;
align-items: center ;
flex- direction : column;
}
#submit
{
outline : none ;
color : black ;
height : 31px ;
width : 90px ;;
border-radius: 20px ;
border-style : none ;
background-color :yellow;
font-weight : 550 ;
}
#submit:hover
{
transition: 1 s;
font-weight : 550 ;
background-color : red ;
border : 2px solid yellow;
color : white ;
}
#enter
{
color : black ;
height : 32px ;
width : 250px ;
text-align : center ;
font-size : small ;
border-top-left-radius: 20px ;
border-bottom-right-radius: 20px ;
border-bottom-left-radius: 20px ;
border-style : none ;
background-color :yellow;
}
#enter:hover
{
transition: 0.4 s;
background-color :pink;
}
img[alt= "www.000webhost.com" ]
{
display : none ;
}
a
{
font-weight : 500 ;
font-family : monospace ;
font-size : 105% ;
text-decoration : none ;
color : black ;
}
a:hover
{
text-decoration : underline ;
}
a:first-child
{
margin-right : 28px ;
}
@keyframes bganimation
{
0% {
background-position : 0% 50% ;
}
50% {
background-position : 100% 50% ;
}
100% {
background-position : 0% 50% ;
}
}
</style> |
Combining Code: In this section, we will combine both HTML and CSS code to make a background animation.
<!DOCTYPE html> < html >
< head >
< title >
Create Animated Background
using CSS3
</ title >
< style >
body {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(155deg,
white, violet, blue, lightblue);
background-size: 450%;
animation: bganimation 15s infinite;
}
input {
margin-bottom: 16px;
outline: none;
}
.container {
background-image: radial-gradient(orange, tomato);
height: 300px;
width: 350px;
border: black 1.5px solid;
border-radius: 5%;
/*box-shadow: 8px 8px 50px black; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#submit {
outline: none;
color: black;
height: 31px;
width: 90px;
;
border-radius: 20px;
border-style: none;
background-color: yellow;
font-weight: 550;
}
#submit:hover {
transition: 1s;
font-weight: 550;
background-color: red;
border: 2px solid yellow;
color: white;
}
#enter {
color: black;
height: 32px;
width: 250px;
text-align: center;
font-size: small;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-style: none;
background-color: yellow;
}
#enter:hover {
transition: 0.4s;
background-color: pink;
}
img[alt="www.000webhost.com"] {
display: none;
}
a {
font-weight: 500;
font-family: monospace;
font-size: 105%;
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
a:first-child {
margin-right: 28px;
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</ style >
</ head >
< body >
< div class = "container" >
< input id = "enter" type = "textbox"
placeholder = "USERNAME" >
< input id = "enter" type = "password"
placeholder = "PASSWORD" >
< button id = "submit" type = "button" >
< span id = "span" >SUBMIT</ span >
</ button >
< br >
< div id = "forget" >
< a href = "" >Create Account</ a >
< a href = "" >Forget Password?</ a >
</ div >
</ div >
</ body >
</ html >
|
Output: