How to create a UI designed background Animation using Html and Css |Background Animation|

May 05, 2021
Read

Creating a UI designed background animation using html and css


Css Background animation


Hello guys.I have been here today with another dynamic article about creating a UI designed background using Html and Css. It's really simple by following this tutorial.


Here these are the steps to get the correct result .plz follow the steps one by one



Step 1- first of all write the basic code of html


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
Step 2 - we have to write the html code for designing background .

For that ,we just want to code some divisions(i.e 15) in the body tag in which all the divisions should be embed in an another main division.

And here i also included a head tag . Remember that all the entities like head tags and the taken 15 divisions and the main division should be embed in another main division which I have named it with a class unofficial.

Note-In the below code i have used image instead of making an svg which can took up more time .the image will be given below so plz download it and paste the url in the image tag.

<body>

    <div class="unofficial">
        <h2>MR.UNOFFICIAL</h2>
        <div class="diamond">
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
            <div><img src="E:\☻DINESH IMP☻/2020.png" alt="" height="70px" width="70px"></div>
        </div>
    </div>
</body>
Step 3 - Now we have to write the code for creating animation on background using CSS

Now I'm going to write the css code in the style tag .

In that style tag I'm gonna write the code for body attributions  which can make the output to be resulted in a proper way. So  I'm writing that maging and padding of the body should be zero

   body {
            margin: 0;
            padding: 0;
        }
Now write the code for designing the head tag and also also we have to design the main section of the html code which is named with a class unofficial .

 h2 {
            font-size: 40px;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            position: absolute;
            font-family: poppins;
            margin: 0;
        }
        
               
        .unofficial {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(to right, #EE7752, #E73c7E, #23A6D5);
        }

Step 4- Now we have to write the code for animating the divisions in which the images are embed 

Now we are going to animate the divisions by simply using the animate property for each division

So for that we have to write the code for the  main division in which all divisions are included .
Don't be confused ,we are just writing the code for the main division with class "diamond"

By taking the diamond division I'm writing that the height and width of the division should be 100px and the position should be absolute, but not fixed.

    .diamond div {
            position: absolute;
            height: 100px;
            width: 100px;
        }
Now we have to edit all the 15 taken divisions.And we are making them to be in different positions on the background.For that we have to use the "top" & "left" properties for aligning the images on background.And this is clearly shown below and we are doing the same to all the divisions by considering them all as child's of main division "diamond" 

.diamond div:nth-child(1) {
            top: 12%;
            left: 42%;
            }
Now it's going to be done in a few minutes.Now we have to write the animate tag in the above code which is used to animate the images using a @keyframes property.The code for animate property is given below 


       animation: animate 10s linear infinite;
Here in the above code we have used animate property and in that we have aligned the values in where the image sholud be placed .and also we have given the time 10 sec.bcs it sholud be animate for 10sec.And we also change it for each division.

Same as the div:nth child(1) we have to write the code for all divisions by changing the alignments and animation time.
Apply that for all


.diamond div:nth-child(2) {
            top: 70%;
            left: 50%;
            animation: animate 7s linear infinite;
        }
        
        .diamond div:nth-child(3) {
            top: 17%;
            left: 6%;
            animation: animate 9s linear infinite;
        }
        
        .diamond div:nth-child(4) {
            top: 20%;
            left: 60%;
            animation: animate 10s linear infinite;
        }
        
        .diamond div:nth-child(5) {
            top: 67%;
            left: 1%;
            animation: animate 6s linear infinite;
        }
        
        .diamond div:nth-child(6) {
            top: 80%;
            left: 70%;
            animation: animate 12s linear infinite;
        }
        
        .diamond div:nth-child(7) {
            top: 60%;
            left: 80%;
            animation: animate 15s linear infinite;
        }
        
        .diamond div:nth-child(8) {
            top: 32%;
            left: 25%;
            animation: animate 16s linear infinite;
        }
        
        .diamond div:nth-child(9) {
            top: 90%;
            left: 25%;
            animation: animate 9s linear infinite;
        }
        
        .diamond div:nth-child(10) {
            top: 20%;
            left: 80%;
            animation: animate 5s linear infinite;
        }
        
        .diamond div:nth-child(11) {
            top: 80%;
            left: 40%;
            animation: animate 5s linear infinite;
        }
        
        .diamond div:nth-child(12) {
            top: 60%;
            left: 30%;
            animation: animate 5s linear infinite;
        }
        
        .diamond div:nth-child(13) {
            top: 40%;
            left: 90%;
            animation: animate 5s linear infinite;
        }
        
        .diamond div:nth-child(14) {
            top: 90%;
            left: 60%;
            animation: animate 5s linear infinite;
        }
        
        .diamond div:nth-child(15) {
            top: 10%;
            left: 20%;
            animation: animate 5s linear infinite;
        }
Yeah it's done.Now going to the last step.



Step 5- Using @keyframes property to make the background animate.

Now we are going to write the code for making background animate by simply using @keyframes property .

In that @keyframes we have to Write the behavior of the images at particular positions .The @keyframes property controls the behavior of the image such as initial position and final positions ,animation time ,animation accordance etc..

So for we have to include the "transformation" for animate about 0% and about 100%.And we also use opacity property which is 1 at initial position and 0 at final position,because the image should be animate just like a magic effect,it should be appear and should be gone at final positions 


    @keyframes animate {
            0% {
                transform: scale(0) translateY(0) rotate(0);
                opacity: 1;
            }
            100% {
                transform: scale(1.3) translateY(-90px) rotate(360deg);
                opacity: 0;
            }
        }
Yeah it's completely done now ,Just compile it check the output.For better results follow this tutorial step by step

The output will be looks like this provided below


Download the image here:

Download the source code here:

For any queries and troubles plz click on red color live chat button and press on whatsapp.

Thats it for today ,plz be tuned for next article                               
                                       Yours Dinesh


Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.