Skip to main content

Walking man loading animation by HTML

 THE WALKING MAN LOADING ANIMATION || FULL CODE OF HTML


#CODE:


                         

<!DOCTYPE html>

<html>

    <head>

        <title>Page Title</title>

        <style type="text/css">

            body {

    margin:0px;

    padding:0px;

    background-color:orange;

}

.main{

    position:relative ;

    transform:translate (-50%,-50%);

    top:50%;

    left:10%;

}

.cir{

    position:absolute;

    height:50px;

    width:50px;

    top:31vh;

    left:153px;

    background-color:white;

    border-radius:50%;

    animation:up 1.5s infinite ;

    transition:0.5s;

}

@keyframes up{

   50%{

        transform:translateY(10px) ;

    }

}

.body2{

    position:absolute ;

    top:8vh;

    left:-45px;

    width:55px;

    height:100px;

    background-color:white;

    border-radius: 700px 50px 10px 10px;

    transform:skew(-5deg);

}

.foot1{

    position:absolute ;

    top:65vh;

    left:90px;

    width:30px;

    height:15px;

    background-color:white;

    border-radius:20px 20px 10px 10px;

    transform:skew(5deg);

    z-index:1;

    animation:cc 1.5s infinite;

    transition:0.6s ;

}

@keyframes cc {

    40%{

        left:150px;

        transform:rotate(35deg);

        top:64vh;

    }

    50%{

        transform:rotate(-20deg);

        top:65vh;

        

    }

    90%{

        left:90px;

        transform:rotate(0deg);

    }

}

.foot1::after{

    content:"";

    position:absolute ;

    top:-5px;

    right:0px;

    left:-5px;

    width:130%;

    height:10px;

    background-color:orange;

    transform:rotate(3deg);

    border-radius:30px;

}

.foot2{

    position:absolute ;

    top:65vh;

    left:150px;

    width:30px;

    height:15px;

    background-color:white;

    border-radius:20px 20px 10px 10px;

    transform:skew(5deg);

    transition:0.6s;

    animation:bb 1.5s infinite ;

}

@keyframes bb{

    40%{

        left:90px;

        transform:rotate(35deg);

        top:64vh;

    }

    50%{

        transform:rotate(-20deg);

        top:65vh;

        

    }

    90%{

        left:150px;

        transform:rotate(0deg);

    }

}

.foot2::after{

    content:"";

    position:absolute ;

    top:-5px;

    right:0px;

    left:-5px;

    width:130%;

    height:10px;

    background-color:orange;

    transform:rotate(3deg);

    border-radius:30px;

}

.cir2{

    position:absolute ;

    top:67vh;

    left:80px;

    width:110px;

    height:10px;

    border-radius:50%;

    background-color:grey;

    z-index:-1;

    opacity:0.2;

    animation:mm 1.5s infinite ;

}

@keyframes mm{

    50%{

        transform:scale(1.2);

    }

}

        </style>

    </head>

    <body><div class="main">

        <div class="cir">

            <div class="body2"></div></div>

                <div class="foot1"></div>

                <div class="foot2"></div>

                <div class="cir2"></div>

        </div>

    

    </body>

</html>


#OUTPUT:






Labels:

Comments

Post a Comment

The Most Populer

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>     ...
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more