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:






Comments

The Most Populer

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

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

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{     ...