Skip to main content

Website background design using HTML and CSS

         Background plays a big role in website designing.

When a visitor visits a website, the background works to attract him and keep him on the website.     



Website background design using HTML and CSS




HTML:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animated background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h2>Animated Background</h2>
<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>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>





CSS:

body{
    margin: 0;
    padding: 0;
}
.wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to right, #ee0979, #ff6a00);
}
h2{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
}
.box div{
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: transparent;
    border: 6px solid rgba(255,225,225, 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 ;
}
.box div:nth-child(11){
    top: 22%;
    left: 72%;
    animation:animate 20s linear infinite ;
}
.box div:nth-child(12){
    top: 25%;
    left: 50%;
    animation:animate 12s linear infinite ;
}
.box div:nth-child(13){
    top: 90%;
    left: 6%;
    animation:animate 9s linear infinite ;
}
.box div:nth-child(14){
    top: 80%;
    left: 60%;
    animation:animate 16s linear infinite ;
}
.box div:nth-child(15){
    top: 67%;
    left: 30%;
    animation:animate 6s linear infinite ;
}
@keyframes animate{
    0%{
        transform: scale(0) translateY(0) rotate(0);
        opacity: 1;
    }
    100%{
        transform: scale(1.3) translateY(-90px) rotate(360deg);
        opacity: 0;
    }
    
}

Output:








</html>




Labels:

Comments

Post a Comment

Popular posts from this blog

Eduford HTML and CSS dynamic website template free with source code

               For more templates please subscribe the blog and share it             For more templates please subscribe the blog and share it                    For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it           For more templates please subscribe the blog and share it                                       DOWNLOAD TEMPLATE
Post a Comment
Read more

Car garage web page design with full source code

  HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>car website design</title>     <link rel="stylesheet" href="style.css">     <link href="https://fonts.googleapis.com/css2?     family=Roboto:wght@300;400;900&display=swap" rel="stylesheet"> </head> <body>  <div class="container">      <nav>          <img src="images/menu.png">          <ul>              <li><img src="images/car_icon.png" </li>              <li>Engines</li>              <li>Tyres</li>              <li>Break</li>              <li>Gear box</li>              <li>Cooling</li>          </ul>      </nav>      <div class="con
Post a Comment
Read more