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
Post a Comment