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

Best phones under 2000/-

    Realme 7 pro(64Gb ROM / 6Gb RAM) 18499/- OS Android RAM 6 GB Product Dimensions 16.23 x 7.54 x 0.94 cm; 196.5 Grams Batteries 1 Lithium Polymer batteries required. (included) Item model number RMX2151 Connectivity technologies 4G Special features 6 GB RAM | 64 GB ROM | Expandable Upto 256 GB, 64MP + 8MP + 2MP + 2MP | 16MP Front Camera, MediaTek Helio G95 Processor, 5000 mAh Lithium-ion Battery, 16.51 cm (6.5 inch) Full HD+ Display Samsung Galaxy M31s (6Gb RAM / 128Gb ROM) 19499/- Quad camera setup - 64MP (F1.8) main camera + 12MP (F2.2) ultra wide camera + 5MP (F2.4) depth camera + 5MP (F2.4) macro camera | 32MP (F2.2) front camera 16.4 centimeters (6.5-inch) super Amoled - Infinity-O display, FHD+ capacitive multi-touch touchscreen with 1080 x 2400 pixels resolution, 407 ppi pixel density and Contrast Ratio: 78960:1 Memory, Storage & SIM: 6GB RAM, 128GB internal memory expandable up to 512GB | Dual SIM (nano+nano) dual-standby (4G+4G) Android v10.0 operating system wi...
Post a Comment
Read more

What is Firebase ?

Developing a booming app isn't easy to reach a broad audience; There are various devices in the world, and every device comes with a different screen size; you'll need to consider your app runs comfortably for all users using iOS, Android, and the web, and to build this application you need a backend. If you already own an application, that has lots of users Your users get logged in to your app, which means your backend will have to scale, and then after you solve your scaling problem you have to find more ways to spread the word to get fresh users. But you have to measure all these activities When you get lots of users and your app is not able to tolerate that situation, then it will crash and cause a service meltdown. This is why Firebase was developed It has all the tools that you need to build your successful app. It helps you reach new users, keep them engaged scale up to meet that demand, in addition to getting paid from beginning to being in firebase, you will have a Tes...
Post a Comment
Read more