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

How to create Stopwatch by using Html and Javascript | Digital Stopwatch

How to create Stopwatch by using Html-Css-Javascript || Digital StopWatch  #CODE  :  <!DOCTYPE html> <html> <head> <title>Stopwatch</title> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> body{ margin: 0;     padding: 0;     background-color: #6495ED;     box-sizing: border-box; } .con{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; background: #ececec; box-shadow: 20px 20px 60px red, -20px -20px 60px #fff; height: 380px; width: 280px; } .time{ border-radius: 50%; background: #fff; box-shadow: inset 20px 20px 60px green, inset -20px -20px 60px #fff; height: 150px; width: 150px; position: absolute; margin: 60px 0 0 65px; transform: scale(1.5); } .buttons{ ...
Post a Comment
Read more

Javascript FireCracker Animation

  || FireCracker Animation Using JavaScript ||  #CODE :                                                                              <!DOCTYPE html> <html> <head> <title>JavaScript FireDesign</title> <style type="text/css"> body{ background: #000; margin: 0; width: 100%; overflow: hidden; } </style> </head> <body> <canvas></canvas> <script type="text/javascript"> var t =0; var c = document.querySelector("canvas"); var $ = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; $.fillStyle = 'hsla(0,0%,0%,1)'; window.addEventListener('resize',function(){ c.width = window.innerWidth; c.height= window.innerHeight; },fa...
Post a Comment
Read more

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...
Post a Comment
Read more