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

SideBar PLUS Icon with animation

SideBar PLUS Icon with Animation || POP UP icon Box || Icon Interaction in HTML                      Here is the best code for pop up icon box with the animation effect. These icons will be use in the many website for users attraction. Do the code now..! #CODE : --     <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             * {     margin: 0;     padding: 0;     box-sizing: border-box; } body {     display: flex;     justify-content: center;     align-items: center;     min-height: 100vh;     --light-color: #f8f9fd;     background: #FF6347; } .container {     position: relative;     display: flex;     flex-wrap: wrap; ...
Post a Comment
Read more

Aatmnirbhar Bharat 2020 | आत्मनिर्भर भारत | Bharat Navnirman | best article in marathi

#VocalForLocal   #DigitalIndia     #Swadeshi     #BeIndianBuyIndian   आत्मनिर्भर भारत              निसर्गाकडे लक्ष्य दिले तर एक बाब लक्षात येते कि , एक सजीव प्राणी दुसऱ्या सजीव प्राणी निर्माण करतो , तसेच दुसऱ्या प्राण्यावर अवलंबून असतो नंतर मात्र हा नवीन सजीव आत्मनिर्भर होतो व स्वतंत्र पने जगू लागतो.                     प्राचीन भारतीय समाजव्यवस्थेवर एक नजर टाकल्यास प्रामुख्याने एक बाब  लक्षात येते कि प्राचीन खेडी (छोटे गाव ) हि स्वयंपूर्ण होती. आणि सर्वात महत्वाची गोष्ट हि कि , त्यांच्या सर्व गरजा  ह्या त्यांच्या खेड्यातच पूर्ण व्हायच्या. हि गवे इतरांवर अवलंबून व परावलंबी मुळीच नव्हती . मुळात यालाच आपण आत्मनिर्भरता असे म्हणू शकतो . पण काळाच्या ओघात शासनव्यवस्था बदलत गेली आणि हि स्वयंपूर्ण असलेली खेडी पुढे परावलंबी बनत गेली . यालाच आपण गुलामगिरी म्हणू शकतो , आणि एकदा का आपण गुलाम झालो कि आपली अस्मिता , विद्वत्ता व कचरा यात थोडाही ...
Post a Comment
Read more

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{     ...
Post a Comment
Read more