Home » Background Animation Effect Using HTML and CSS

Background Animation Effect Using HTML and CSS

by techmidpoint
Background Animation Effect Using HTML and CSS

Background Animation Effect Using HTML and CSS

Hello, reader welcome to you another tutorial of techmidpoint. In this tutorial, I am going to make an awesome Background Animation Effect Using HTML and CSS. I have added a gradient background color and some small tools for animation.

HTML


<!DOCTYPE html>
<html>
    <head>
        <title>CSS Background Animation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div class ="animation-area">
        <ul class ="box-area">
            <li></li>
             <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            </ul>
        </div>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial;
}


.animation-area{
    background: linear-gradient(to left,#8942a8,#ba382f);
    width:100%;
    height: 100vh;
}
.box-area{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    overflow: hidden;
}
.box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width:25px;
    height: 25px;
    background:rgba(255,255,255,0.5);
    animation:animate 20s linear infinite;
    bottom: -150px;
}
.box-area li:nth-child(1){
    left:86%;
    width:80px;
    height: 80px;
    animation-delay: 0s;
}
.box-area li:nth-child(2){
    left:12%;
    width:30px;
    height: 30px;
    animation-delay: 0s;
    animation-delay: 1.5s;
    animation-duration: 10s;
}
.box-area li:nth-child(3){
    left:70%;
    width:100px;
    height: 100px;
    animation-delay: 5.5s;
}
.box-area li:nth-child(4){
    left:42%;
    width:150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 15s;
}
.box-area li:nth-child(5){
    left:65%;
    width:40px;
    height: 40px;
    animation-delay: 0s;
}
.box-area li:nth-child(6){
    left:15%;
    width:110px;
    height: 110px;
    animation-delay: 3.5s;
}
@keyframes animate{
    0%{
        transform: translateY(0)rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(-800px)rotate(360deg);
        opacity: 0;
    }
}

For More Tutorials Please  Click Here

You may also like

Leave a Comment